隔行换色总结
功能效果展示：
第一种思路：
使用数组，将数组的内容渲染到页面上，序号也就是将数组的下标输出到第一个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();
})
-
添加函数
addData：- 创建一个新的表格行
tr以及三个单元格tdNum、tdData和tdDel。 - 创建文本节点
data和delText，分别表示数据和 “删除” 按钮的文本。 - 创建 “删除” 按钮
del，并将delText添加到按钮中。 - 将
data添加到tdData中，将del添加到tdDel中。 - 将三个单元格添加到
tr中，并将tr添加到表体body中。 dataNum增加 100，以便下次添加行时使用新的数据。- 调用
rowColor和numOrder函数，更新表格的颜色和序号。
- 创建一个新的表格行
-
序号函数
numOrder：- 获取表体中的所有行
trNum。 - 遍历这些行，为每行的第一个单元格设置序号，序号从 1 开始。
- 调用
rowColor函数，更新表格的颜色。
- 获取表体中的所有行
-
颜色函数
rowColor：- 获取表体中的所有行
trNum。 - 遍历这些行，根据行的索引奇偶性设置不同的背景颜色，奇数行为红色，偶数行为白色。
- 获取表体中的所有行
-
删除函数：
- 为表体添加点击事件监听器。
- 当点击的元素文本为 “删除” 时，删除对应的行。
- 调用
rowColor和numOrder函数，更新表格的颜色和序号。