隔行换色总结

 功能效果展示：

第一种思路：

使用数组，将数组的内容渲染到页面上，序号也就是将数组的下标输出到第一个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 函数，更新表格的颜色和序号。