<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Adding and Removing Elements</title> <style> table{ border-collapse: collapse; } td,th{ padding: 5px; border: 1px solid #cccccc; } /*奇数行*/ tr:nth-child(2n+1){ background-color: #eeffee; } /*偶数行*/ tr:nth-child(2n){ background-color: #8843ff; } </style> </head> <body> <table id="mixed"> <tr> <th>Value One</th> <th>Value Two</th> <th>Value Three</th> </tr> </table> <div id="result"></div> <div> <h3>从HTML表格删除行</h3> <h5>添加并删除表格行及其相关单元格和数据</h5> </div> <script> var values = new Array(6); values[0] = [123.45,"apple",true]; values[1] = [65,"bababa",false]; values[2] = [1034.99,"cherry",false]; values[3] = [534.99,"shawn",false]; values[4] = [10.99,"Khea",false]; values[5] = [164.99,"Todd",false]; var mixed = document.getElementById("mixed"); var tbody = document.createElement("tbody"); //创建一个元素 //针对每个外围数组行 for(var i = 0; i < values.length; i++){ var tr = document.createElement("tr"); //针对每个内部数组单元格,创建td, 然后附加文本 for(var j = 0; j < values[i].length; j++){ var td = document.createElement("td"); //创建单元格,列 var txt = document.createTextNode(values[i][j]); td.appendChild(txt); tr.appendChild(td); } //绑定事件处理程序 tr.onclick = prunerow; //把行附加到表 tbody.appendChild(tr); mixed.appendChild(tbody); } function prunerow(){ //删除行 var parent = this.parentNode;//获取单元格的行 var oldrow = parent.removeChild(this); //删除行 //来自删除行的数据的dataString var dataString = ""; /** * 取出行中的数据 */ for(var i = 0; i < oldrow.childNodes.length; i++){ var cell = oldrow.childNodes[i]; console.log(cell); dataString += cell.firstChild.data + " "; } //输出消息 var msg = document.createTextNode("removed " + dataString); var p = document.createElement("p"); p.appendChild(msg); document.getElementById("result").appendChild(p); } </script> </body> </html>
JavaScript操作表格
最新推荐文章于 2024-08-16 11:39:58 发布