?功能效果展示：

第一種思路：

使用數組，將數組的內容渲染到頁面上，序號也就是將數組的下標輸出到第一個td上，將數組的內容輸出到第二個td上，（使用``拼接字符串）

具體操作：

1.HTML 結構搭建?

• 首先，讓我們來看一下 HTML 代碼。我們創建了一個基本的表格結構，<table>標簽定義了整個表格，cellspacing="0"屬性用于消除表格單元格之間的間距。?

• <thead>標簽內包含了表格的頭部信息，這里有一行<tr>，其中三個<th>標簽分別定義了 “序號”“內容”“操作” 三個表頭。?

• <tbody>標簽則是表格主體內容的容器，初始時，我們預留了它作為動態生成表格行的區域，注釋掉了一個示例的<tr>行，這行只是為了展示結構，實際運行時將由 JavaScript 動態生成。?

• 最后，還有一個<button>按鈕，其類名為add，并綁定了一個點擊事件οnclick="addData()"，用于觸發添加數據行的操作。

html：

<table cellspacing="0"><thead><tr><th>序號</th><th>內容</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>data</td><td><button class="del">刪除</button></td></tr> --></tbody></table><button class="add" onclick="addData()">添加行</button>

css：

2.CSS 樣式美化?

• 為了讓表格看起來更加美觀和易于閱讀，我們添加了一些 CSS 樣式。?
• *選擇器用于清除所有元素的默認內外邊距，確保表格布局的一致性。?
• table選擇器雖然目前只注釋掉了設置邊框的代碼，但為后續可能的整體表格樣式調整預留了空間。?

• th選擇器為表頭單元格設置了內邊距和較粗的邊框，使其更加醒目。?

• td選擇器為普通單元格設置了適當的內邊距和較細的邊框，區分表頭與內容單元格的視覺效果。

<style>* {margin: 0;padding: 0;}table {/* border: black 2px solid; */}th {padding: 5px 20px 5px 20px;border: 2px solid black;}td {padding: 5px 20px 5px 20px;border: 1px solid black;}</style>

js：

3.JavaScript 功能實現?

• 初始化變量：?

• 我們定義了一個數組arr，并初始化為[100]，這個數組將用于存儲表格中的數據。?

• 獲取頁面中的<tbody>元素，并賦值給變量body，后續將通過它來操作表格主體內容。?

• 獲取類名為add的按鈕元素，并賦值給變量add?

• 表格渲染函數apply：?

• apply函數負責將數組中的數據渲染到表格中。它首先初始化一個空字符串str，用于存儲生成的 HTML 代碼片段。?

• 通過for循環遍歷數組arr，在每次循環中，使用模板字符串生成一個<tr>行的 HTML 代碼。這里利用三元運算符${i%2!==0?'style="background-color: aqua;"':''}根據i的奇偶性為<tr>行設置不同的背景顏色，奇數行背景色為aqua，偶數行保持默認。?

• 然后將當前行的序號i + 1、數組中的數據arr[i]以及一個帶有刪除功能的<button>按鈕（點擊時調用delData(${i})函數）分別插入到對應的<td>元素中。?

• 循環結束后，將生成的完整 HTML 字符串str賦值給body.innerHTML，從而實現表格的渲染。?

• 添加數據函數addData：?

• addData函數用于實現添加數據行的功能。它首先將變量num的值增加 100，這里的num用于生成新的數據值。?

• 然后將新生成的num值通過arr.push(num)方法添加到數組arr中，并在控制臺打印數組arr，方便查看數據更新情況。?

• 最后調用apply函數，重新渲染表格，使新添加的數據能夠及時顯示在頁面上。?

• 刪除數據函數delData：?

• delData函數接收一個參數index，該參數表示要刪除的數據在數組中的索引。?

• 它通過arr.splice(index, 1)方法從數組arr中移除指定索引位置的數據。?

• 同樣調用apply函數，重新渲染表格，實現刪除數據行后頁面的實時更新。

let arr = [100];let body = document.getElementsByTagName('tbody')[0];let add = document.getElementsByClassName('add')[0];console.log(add);function apply() {let str = "";for (i = 0; i < arr.length; i++) {str +=`<tr ${i%2!==0?'style="background-color: aqua;"':''}><td>${i+1}</td><td>${arr[i]}</td><td><button class="del" onclick="delData(${i})">刪除</button></td></tr>`;}body.innerHTML = str;}apply();let num = 100;// 添加函數function addData() {num += 100;console.log(num);arr.push(num);console.log(arr);apply();}// 刪除function delData(index){arr.splice(index,1);apply();}

以上是第一種思路：

第二種思路中，html和css是一致的，所以我們就只講js中的具體操作。

• dataNum：初始值為 100，用于為新添加的行提供數據。

// 添加函數function addData() {let tr = document.createElement('tr');let tdNum = document.createElement('td');let tdData = document.createElement('td');let tdDel = document.createElement('td');// let num = document.createTextNode();let data = document.createTextNode(dataNum);let delText = document.createTextNode("刪除");let del = document.createElement('button');del.appendChild(delText);tdDel.appendChild(del);// tdNum.appendChild(num);tdData.appendChild(data);tr.appendChild(tdNum);tr.appendChild(tdData);tr.appendChild(tdDel);console.log(tr);body.appendChild(tr);dataNum += 100;rowColor();numOrder();}// 序號函數function numOrder() {let trNum = body.children;console.log(trNum);for (i = 0; i < trNum.length; i++) {console.log(i);trNum[i].children[0].innerHTML = i+1;}rowColor();}// 顏色函數function rowColor() {let trNum = body.children;for (i = 0; i < trNum.length; i++) {if (i % 2 !== 0) {console.log(document.getElementsByTagName('tr')[i]);document.getElementsByTagName('tr')[i+1].style.backgroundColor = "red";}else{document.getElementsByTagName('tr')[i+1].style.backgroundColor = "white";}}}// 刪除函數body.addEventListener('click', function(e) {console.log(e.target.innerText);if (e.target.innerText == "刪除") {body.removeChild(e.target.parentElement.parentElement);}rowColor();numOrder();})

1. 添加函數?addData：

   • 創建一個新的表格行?tr?以及三個單元格?tdNum、tdData?和?tdDel。
   • 創建文本節點?data?和?delText，分別表示數據和 “刪除” 按鈕的文本。
   • 創建 “刪除” 按鈕?del，并將?delText?添加到按鈕中。
   • 將?data?添加到?tdData?中，將?del?添加到?tdDel?中。
   • 將三個單元格添加到?tr?中，并將?tr?添加到表體?body?中。
   • dataNum?增加 100，以便下次添加行時使用新的數據。
   • 調用?rowColor?和?numOrder?函數，更新表格的顏色和序號。

2. 序號函數?numOrder：

   • 獲取表體中的所有行?trNum。
   • 遍歷這些行，為每行的第一個單元格設置序號，序號從 1 開始。
   • 調用?rowColor?函數，更新表格的顏色。

3. 顏色函數?rowColor：

   • 獲取表體中的所有行?trNum。
   • 遍歷這些行，根據行的索引奇偶性設置不同的背景顏色，奇數行為紅色，偶數行為白色。

4. 刪除函數：

   • 為表體添加點擊事件監聽器。
   • 當點擊的元素文本為 “刪除” 時，刪除對應的行。
   • 調用?rowColor?和?numOrder?函數，更新表格的顏色和序號。