标签：
1 <!DOCTYPE html> 2 <html xmlns="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> <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" class="count" value="‘ + Count + ‘"/>‘; 101 tr.children[3].innerHTML = ‘<a href="javascript:;" onclick="saveEdit(this)">保存</a> <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> <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> <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>
标签：
原文地址：http://www.cnblogs.com/DKnight/p/4537355.html
