你的位置:首页 > Java教程

[Java教程]JavaScript动态增删改表格数据


 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title></title> 6   <style type="text/css"> 7     div { border: 1px solid #0094ff; text-align: center; width: 420px; margin: 5px auto; } 8  9     #divNumEdit { float: right; width: 90px; border: 0px; margin: 0; } 10  11     table { border-collapse: collapse; border: 1px solid #0094ff; width: 400px; margin: 5px auto; text-align: center; } 12  13     td { border: 1px solid #0094ff; } 14     input.count {width:32px; text-align:center;} 15     #trTitle { font-weight: bolder; background-color: #4cff00; } 16   </style>   17 </head> 18 <body> 19   <div>     20     <input type="button" value="新增菜单" id="btnAddOption" onclick="addMenuOption()" /> 21     <label>菜单:</label> 22     <select id="selList"> 23       <option>兰州拉面</option> 24       <option>肉夹馍</option> 25       <option>手撕包菜</option> 26       <option>西兰花炒蛋</option> 27     </select> 28     <label>数量</label> 29     <div id="divNumEdit"> 30       <input type="button" value="+" onclick="EditNum(this);" /> 31       <label id="labelNum">0</label> 32       <input type="button" value="-" onclick="EditNum(this)" /> 33     </div> 34   </div> 35   <div> 36     <input type="button" value="新增订单" id="btnAddTr" onclick="addRowData()" /> 37   </div> 38   <table id="tbList"> 39     <tr id="trTitle"> 40       <td>序号</td> 41       <td>菜名</td> 42       <td>数量</td> 43       <td>编辑</td> 44     </tr> 45   </table> 46   <div> 47     <input type="checkbox" id="chkAll" onclick="checkAll()" /><label for="chkAll">全选</label> 48     <a href="javascript:void(0)" onclick="delCheckedRow()">删除选中</a> 49   </div> 50   <script> 51     var index = 1; 52     var table = document.getElementById("tbList"); 53     var Name; 54     var Count; 55     var IsEditable = true;// 标示编辑操作是否可用. 56     function addMenuOption() { 57       var name = prompt("请输入菜单名..."); 58       if (name == null || name == "") return;//验证输入是否为空. 59       var op = document.createElement("option"); 60       op.innerHTML = name; 61       document.getElementById("selList").appendChild(op); 62     }//增加菜单 63     function EditNum(obj) { 64       if (obj.value == "+") { 65         obj.nextElementSibling.innerHTML++; 66       } else { 67         if (obj.previousElementSibling.innerHTML > 0) 68           obj.previousElementSibling.innerHTML--; 69       } 70     }//编辑数量 71     function addRowData() { 72       if (!IsEditable) return; 73       if (document.getElementById("labelNum").innerHTML == 0) { return; }//如果数量为0,不增加行数据. 74       var tr = document.createElement("tr"); 75       var tdId = document.createElement("td"); 76       var tdName = document.createElement("td"); 77       var tdCount = document.createElement("td"); 78       var tdAction = document.createElement("td"); 79       tdId.innerHTML = "<input type='checkbox' />" + index; 80       tdName.innerHTML = document.getElementById("selList").value; 81       tdCount.innerHTML = document.getElementById("labelNum").innerHTML; 82       tdAction.innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>'; 83       tr.appendChild(tdId); 84       tr.appendChild(tdName); 85       tr.appendChild(tdCount); 86       tr.appendChild(tdAction); 87       table.appendChild(tr); 88       index++;//增加序号. 89     }//添加行数据. 90     function delRowData(obj) { 91       table.removeChild(obj.parentNode.parentNode); 92     }//删除行数据. 93     function editRowData(obj) { 94       if (!IsEditable) return; 95       var tr = obj.parentNode.parentNode; 96       Name = tr.children[1].innerHTML; 97       Count = tr.children[2].innerHTML; 98       tr.children[1].innerHTML = "<select>" + document.getElementById("selList").innerHTML + "</select>"; 99       tr.children[1].children[0].value = Name;100       tr.children[2].innerHTML = '<input type="text" value="' + Count + '"/>';101       tr.children[3].innerHTML = '<a href="javascript:;" onclick="saveEdit(this)">保存</a>&nbsp<a href="javascript:;" onclick="cancelEdit(this)">取消</a>';102       IsEditable = false;103     }//编辑行数据104     function cancelEdit(obj) {105       var tr = obj.parentNode.parentNode;      106       tr.children[1].innerHTML = Name;107       tr.children[2].innerHTML = Count;108       tr.children[3].innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>';109       IsEditable = true;110     }//取消编辑111     function saveEdit(obj) {112       var tr = obj.parentNode.parentNode;113       tr.children[1].innerHTML = tr.children[1].children[0].value;114       tr.children[2].innerHTML = tr.children[2].children[0].value;115       tr.children[3].innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>';116       IsEditable = true;117     }//保存编辑后的结果118     function checkAll() {119       var ck = document.getElementById("chkAll").checked;      120       var tr;121       for (var i = 1; i < table.children.length; i++) {122         tr = table.children[i];123         tr.children[0].children[0].checked = ck;124       }125     }//全选126     function delCheckedRow() {127       var tr;128       var ck;129       for (var i = table.children.length-1; i >=1; i--) {130         tr = table.children[i];131         ck = tr.children[0].children[0].checked;132         if (ck) table.removeChild(tr);133       }134     }//删除选中行135   </script>136 </body>137 </html>