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>