1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style type="text/css"> 8 input { 100px; height: 25px; } 9 table { line-height: 30px; } 10 #add { 200px; height: 22px; } 11 input[type=checkbox] { 15px; height: 15px; vertical-align: middle; } 12 </style> 13 </head> 14 15 16 <body style="text-align:center;"> 17 18 19 20 <table border="1"> 21 <thead> 22 <tr> 23 <td><input id="all" type="checkbox" onclick="check();" />全选</td> 24 <th>品名</th> 25 <th>数量</th> 26 <th>单价</th> 27 <th>小计</th> 28 <th>操作</th> 29 </tr> 30 31 </thead> 32 33 <tbody id="biao"> 34 <tr id="row0"><!--默认初始行--> 35 <td><input name="xuan" type="checkbox" /></td> 36 <td>大馒头</td> 37 <td>20</td> 38 <td>15.00</td> 39 <td></td> 40 <td><input id="del" type="button" value="删除" onclick="dele('row0')" /> <input id="xg" type="button" value="修改" onclick="editL('row0')" /></td> 41 </tr> 42 </tbody> 43 <tfoot> 44 <tr> 45 <td colspan="6"><input type="button" id="add" value="新增一行" onclick="xinzeng()" /></td> 46 </tr> 47 </tfoot> 48 49 </table> 50 51 52 </body> 53 </html> 54 <script type="text/javascript"> 55 56 //默认初始行 57 var autoL = document.getElementById("row0").cells; 58 autoL[4].innerHTML = parseInt(autoL[2].innerHTML) * parseInt(autoL[3].innerHTML); 59 60 61 //循环新增行 62 function xinzeng() { 63 var table = document.getElementById("biao");//找到需要设置功能的表格 64 65 var h_index = table.rows.length;//指定插入行的位置 66 var hang = table.insertRow(h_index);//在指定位置插入新增行 67 hang.id = "row" + h_index;//给新增行添加ID 68 69 var lie1 = hang.insertCell(0);//给新增行插入列1 70 lie1.innerHTML = "<input name='xuan' type='checkbox' />";//新增行内容 71 72 var lie1 = hang.insertCell(1);//给新增行插入列2 73 lie1.innerHTML = "小馒头";//新增行内容 74 75 var lie2 = hang.insertCell(2);//给新增行插入列3 76 lie2.innerHTML = "20";//新增行内容 77 78 var lie3 = hang.insertCell(3);//给新增行插入列4 79 lie3.innerHTML = "15.00";//新增行内容 80 81 var lie4 = hang.insertCell(4);//给新增行插入列5 82 var prc = parseInt(lie2.innerHTML);//获取lie2的HTML内容，并转换为数字对象 83 var num = parseInt(lie3.innerHTML); //获取lie3的HTML内容，并转换为数字对象 84 lie4.innerHTML = prc * num;//计算两数字的积 85 86 var lie5 = hang.insertCell(5)//插入列6 87 var del = "<input id='del" + h_index + "' type='button' value='删除' onclick="dele('row" + h_index + "')" />";//添加删除按钮，并注册删除事件 88 var mod = "<input id='mod" + h_index + "' type='button' value='修改' onclick="editL('row" + h_index + "')" />";//添加修改按钮，并注册修改进入事件 89 lie5.innerHTML = del + " " + mod; 90 } 91 92 //删除事件 93 function dele(h_dw) { 94 var h = document.getElementById(h_dw).rowIndex - 1;//定位删除元素所处的行 95 document.getElementById("biao").deleteRow(h);//deleteEow(index) 方法用于从表格删除指定位置的行. 96 //注意：参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起编码。 97 } 98 99 //修改进入事件 100 function editL(l_dw) { 101 var l = document.getElementById(l_dw).cells;//获取改行的单元格 102 text = l[2].innerHTML;//获取第三个单元格的HTML，用index定位 103 l[2].innerHTML = "<input type='text' value='" + text + "' style='30px' />";//改变它的HTML为可修改文本框 104 l[5].lastChild.value = "确定"; //改变修改按钮为确定按钮 105 l[5].lastChild.setAttribute("onclick", "upL('" + l_dw + "')")//给修改按钮注册确定事件，及修改退出事件 106 } 107 108 //修改退出事件 109 function upL(l_dw) { 110 var l = document.getElementById(l_dw).cells;//获取改行的单元格 111 text = l[2].firstChild.value;//获取第三个单元格内的值 112 l[2].innerHTML = text;//改变它的HTML为文本值 113 l[5].lastChild.value = "修改";//改变确定按钮为修改按钮 114 l[5].lastChild.setAttribute("onclick", "editL('" + l_dw + "')")//给修改按钮重新注册回修改进入事件 115 l[4].innerHTML = parseInt(l[2].innerHTML) * parseInt(l[3].innerHTML);//重新计算lie2与lie3的结果 116 } 117 118 119 //全选 120 function check() { 121 inputO = document.getElementsByName("xuan");//获取需要实现全选功能的按钮 122 for (i = 0; i < inputO.length; i++) {//循环，用此作为index，获取每一个inputO按钮 123 if (document.getElementById("all").checked == true) {//判断一个按钮处于选中状态时 124 inputO[i].checked = true;//所有按钮全部执行选中 125 } else {//否则 126 inputO[i].checked = false;//所有按钮全部执行未选中 127 } 128 } 129 130 } 131 132 </script>