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>
欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如果感觉对您有用，请点击推荐。您的支持，是我的动力！