隔行换色总结
第一种思路使用数组将数组的内容渲染到页面上序号也就是将数组的下标输出到第一个td上将数组的内容输出到第二个td上使用拼接字符串具体操作1.HTML 结构搭建首先让我们来看一下 HTML 代码。我们创建了一个基本的表格结构table标签定义了整个表格cellspacing0属性用于消除表格单元格之间的间距。thead标签内包含了表格的头部信息这里有一行tr其中三个th标签分别定义了 “序号”“内容”“操作” 三个表头。tbody标签则是表格主体内容的容器初始时我们预留了它作为动态生成表格行的区域注释掉了一个示例的tr行这行只是为了展示结构实际运行时将由 JavaScript 动态生成。最后还有一个button按钮其类名为add并绑定了一个点击事件οnclickaddData()用于触发添加数据行的操作。htmltable cellspacing0theadtrth序号/thth内容/thth操作/th/tr/theadtbody!-- trtd1/tdtddata/tdtdbutton classdel删除/button/td/tr --/tbody/tablebutton classadd onclickaddData()添加行/buttonAI写代码htmlcss2.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;}/styleAI写代码cssjs3.JavaScript 功能实现初始化变量我们定义了一个数组arr并初始化为[100]这个数组将用于存储表格中的数据。获取页面中的tbody元素并赋值给变量body后续将通过它来操作表格主体内容。获取类名为add的按钮元素并赋值给变量add表格渲染函数applyapply函数负责将数组中的数据渲染到表格中。它首先初始化一个空字符串str用于存储生成的 HTML 代码片段。通过for循环遍历数组arr在每次循环中使用模板字符串生成一个tr行的 HTML 代码。这里利用三元运算符${i%2!0?stylebackground-color: aqua;:}根据i的奇偶性为tr行设置不同的背景颜色奇数行背景色为aqua偶数行保持默认。然后将当前行的序号i 1、数组中的数据arr[i]以及一个带有删除功能的button按钮点击时调用delData(${i})函数分别插入到对应的td元素中。循环结束后将生成的完整 HTML 字符串str赋值给body.innerHTML从而实现表格的渲染。添加数据函数addDataaddData函数用于实现添加数据行的功能。它首先将变量num的值增加 100这里的num用于生成新的数据值。然后将新生成的num值通过arr.push(num)方法添加到数组arr中并在控制台打印数组arr方便查看数据更新情况。最后调用apply函数重新渲染表格使新添加的数据能够及时显示在页面上。删除数据函数delDatadelData函数接收一个参数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?stylebackground-color: aqua;:}td${i1}/tdtd${arr[i]}/tdtdbutton classdel onclickdelData(${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();}AI写代码css以上是第一种思路第二种思路中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 i1;}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)[i1].style.backgroundColor red;}else{document.getElementsByTagName(tr)[i1].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();})AI写代码javascript运行添加函数 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 函数更新表格的颜色和序号。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147074146