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
8 {
9 border:1px solid red;
10 height:20px;
11 width:300px;
12 margin:10px auto;
13 text-align:center;
14 }
15 table
16 {
17
18 width:300px;
19 margin:0 auto;
20 border:1px solid #0094ff;
21 border-collapse:collapse;
22 }
23 td
24 {
25 border:1px solid #0094ff;
26 text-align:center;
27
28 }
29 </style>
30 <script type="text/javascript">
31
32 window.onload = function () {
33 /////////////
34 //添加菜单按钮
35 document.getElementById("btnAddmenu").onclick = function () {
36 //取到用户输入
37 var inputtxt = prompt("请输入", "西瓜");
38 if (inputtxt.trim() == "")
39 return alert("输入合适菜单");
40 var optionobjects = document.getElementById("foodList").children;
41 for (var i = 0; i < optionobjects.length; i++) {
42 if (optionobjects[i].innerHTML.trim() == inputtxt.trim())
43 return alert("重复菜单");
44 }
45 //create一个option
46 var optioncreate = document.createElement("option");
47 optioncreate.innerHTML = inputtxt;
48 //将该option添加给select
49 document.getElementById("foodList").appendChild(optioncreate);
50 }
51 //////////////
52 //新增订单
53 var indexcount = 0;
54 //对象存储td
55 var tdobject = new Object();
56
57
58 document.getElementById("btnAddTr").onclick = function () {
59 //给对象添加属性
60 indexcount++;
61 tdobject.td1 =indexcount+ "<input type=‘checkbox‘ class=‘ck01‘/>";
62 tdobject.menu = document.getElementById("foodList").value;
63 tdobject.state = "<a href=‘#‘ onclick=‘Deltr(this);‘>删除</a> <a href=‘#‘ class=‘edit‘>编辑</a>";
64 var trcreate = document.createElement("tr");
65 //创建tr元素，遍历对象，每个属性给到新创建的td，并将td加给tr
66 for (var i in tdobject) {
67 var tdcreate = document.createElement("td");
68 tdcreate.innerHTML = tdobject[i];
69 trcreate.appendChild(tdcreate);
70 }
71 document.getElementById("tbid01").appendChild(trcreate);
72 //添加新元素，要将这些元素中的onclick事件一起注册
73 //这里注册编辑a标签 事件
74 var editobjets = document.getElementsByClassName("edit");
75 for (var j = 0; j < editobjets.length; j++) {
76 editobjets[j].onclick = function () {
77 //得到行
78 var trobject= this.parentNode.parentNode;
79 //替换行第二列为txt
80 var td02= trobject.children[1];
81 oldinnerhtml= td02.innerHTML;
82 td02.innerHTML = "<input type=‘Text‘ value=‘" + oldinnerhtml + "‘/>";
83 td02.children[0].focus();
84 td02.children[0].select();
85 //替换第三列a标签为保全，取消
86 var td03 = trobject.children[2];
87 td03.innerHTML = "<a href=‘#‘ onclick=‘tdSave(this);‘>保全</a> <a href=‘#‘ onclick=‘tdCancel(this);‘>取消</a>"
88 }
89 }
90 }
91 //////////
92 //全选反选全删
93 document.getElementById("ckall").onclick = function () {
94 var ckobjects = document.getElementsByClassName("ck01");
95 for (var i = 0; i < ckobjects.length; i++) {
96 ckobjects[i].checked = this.checked;
97 }
98 }
99 //选择性多删
100 document.getElementById("DeleteAll").onclick = function () {
101 var ckobjects = document.getElementsByClassName("ck01");
102 for (var i = ckobjects.length-1; i >=0; i--)
103 {
104 if (ckobjects[i].checked == true)
105 {
106 var trobject = ckobjects[i].parentNode.parentNode;
107 trobject.parentNode.removeChild(trobject);
108 }
109 }
110 }
111
112 }
113
114 //结束onload
115
116 //单行删!!!!当触发a标签的点击事件时，a标签不在onload之内，应在a标签加进来的时候立即加上onclick事件
117 function Deltr(aObj) {
118 var trobj = aObj.parentNode.parentNode;
119 trobj.parentNode.removeChild(trobj);
120 }
121 //保全菜单
122 function tdSave(tdobj) {
123 //得到tr 需要保全的td
124 var trobj = tdobj.parentNode.parentNode;
125 var td2 = trobj.children[1]
126 ////
127 var tdinput = td2.children[0].value;
128
129 //替换td的innerHTML
130 td2.innerHTML = tdinput;
131 //替换a标签
132 td2.parentNode.children[2].innerHTML = "<a href=‘#‘ onclick=‘Deltr(this);‘>删除</a> <a href=‘#‘ class=‘edit‘>编辑</a>";
133 //同样插入新元素a标签，需要一并将onclick事件注册给它，这样其实代码很多冗余，建议还是在标签内绑定onclick事件
134 var editobjets = document.getElementsByClassName("edit");
135 for (var j = 0; j < editobjets.length; j++) {
136 editobjets[j].onclick = function () {
137 //得到行
138 var trobject = this.parentNode.parentNode;
139 //替换行第二列为txt
140 var td02 = trobject.children[1];
141 oldinnerhtml = td02.innerHTML;
142 td02.innerHTML = "<input type=‘Text‘ value=‘" + oldinnerhtml + "‘/>";
143 td02.children[0].focus();
144 td02.children[0].select();
145 //替换第三列a标签为保全，取消
146 var td03 = trobject.children[2];
147 td03.innerHTML = "<a href=‘#‘ onclick=‘tdSave(this);‘>保全</a> <a href=‘#‘ onclick=‘tdCancel(this);‘>取消</a>"
148 }
149 }
150 }
151
152 //取消
153 function tdCancel(tdobj)
154 {
155 //取到全局变量存储的保全前的值
156 // alert(oldinnerhtml);
157 //将该值替换this的parernode.parentnode.children[1].children[0].innerhtml
158 tdobj.parentNode.parentNode.children[1].innerHTML = oldinnerhtml;
159 //替换a标签
160 tdobj.parentNode.parentNode.children[2].innerHTML = "<a href=‘#‘ onclick=‘Deltr(this);‘>删除</a> <a href=‘#‘ class=‘edit‘>编辑</a>";
161 //同样插入新元素a标签，需要一并将onclick事件注册给它，这样其实代码很多冗余，建议还是在标签内绑定onclick事件
162 var editobjets = document.getElementsByClassName("edit");
163 for (var j = 0; j < editobjets.length; j++) {
164 editobjets[j].onclick = function () {
165 //得到行
166 var trobject = this.parentNode.parentNode;
167 //替换行第二列为txt
168 var td02 = trobject.children[1];
169 oldinnerhtml = td02.innerHTML;
170 td02.innerHTML = "<input type=‘Text‘ value=‘" + oldinnerhtml + "‘/>";
171 td02.children[0].focus();
172 td02.children[0].select();
173 //替换第三列a标签为保全，取消
174 var td03 = trobject.children[2];
175 td03.innerHTML = "<a href=‘#‘ onclick=‘tdSave(this);‘>保全</a> <a href=‘#‘ onclick=‘tdCancel(this);‘>取消</a>"
176 }
177 }
178 }
179 </script>
180 </head>
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201 <body>
202 <div>
203 <input type="button" value="新增菜单" id="btnAddmenu"/>
204 <label>菜单：</label>
205 <select id="foodList">
206 <option>蛋炒饭</option>
207 <option>火锅</option>
208 <option>红烧肉</option>
209 </select>
210
211 </div>
212 <div><input type="button" value="加订单" id="btnAddTr"/></div>
213 <table id="tbid01">
214 <tr>
215 <td>序号</td>
216 <td>菜名</td>
217 <td>编辑</td>
218
219 </tr>
220 </table>
221 <div><input type="checkbox" id="ckall"/>
222 <a href="#" id="DeleteAll">删除选中</a>
223 </div>
224 </body>
225 </html>
代码
时间： 2024-10-03 01:43:37