首页 > 代码库 > js初级练习2（增删改）
js初级练习2（增删改）
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=http://www.mamicode.com/‘#‘ onclick=‘Deltr(this);‘>删除 编辑"; 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=http://www.mamicode.com/‘" + oldinnerhtml + "‘/>"; 83 td02.children[0].focus(); 84 td02.children[0].select(); 85 //替换第三列a标签为保全，取消 86 var td03 = trobject.children[2]; 87 td03.innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘tdSave(this);‘>保全 取消" 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 //结束onload115 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 需要保全的td124 var trobj = tdobj.parentNode.parentNode;125 var td2 = trobj.children[1]126 ////127 var tdinput = td2.children[0].value;128 129 //替换td的innerHTML130 td2.innerHTML = tdinput;131 //替换a标签132 td2.parentNode.children[2].innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘Deltr(this);‘>删除 编辑";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 //替换行第二列为txt140 var td02 = trobject.children[1];141 oldinnerhtml = td02.innerHTML;142 td02.innerHTML = "<input type=‘Text‘ value=http://www.mamicode.com/‘" + oldinnerhtml + "‘/>";143 td02.children[0].focus();144 td02.children[0].select();145 //替换第三列a标签为保全，取消146 var td03 = trobject.children[2];147 td03.innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘tdSave(this);‘>保全 取消"148 }149 }150 }151 152 //取消153 function tdCancel(tdobj)154 {155 //取到全局变量存储的保全前的值156 // alert(oldinnerhtml);157 //将该值替换this的parernode.parentnode.children[1].children[0].innerhtml158 tdobj.parentNode.parentNode.children[1].innerHTML = oldinnerhtml;159 //替换a标签160 tdobj.parentNode.parentNode.children[2].innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘Deltr(this);‘>删除 编辑";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 //替换行第二列为txt168 var td02 = trobject.children[1];169 oldinnerhtml = td02.innerHTML;170 td02.innerHTML = "<input type=‘Text‘ value=http://www.mamicode.com/‘" + oldinnerhtml + "‘/>";171 td02.children[0].focus();172 td02.children[0].select();173 //替换第三列a标签为保全，取消174 var td03 = trobject.children[2];175 td03.innerHTML = "<a href=http://www.mamicode.com/‘#‘ onclick=‘tdSave(this);‘>保全 取消"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>
js初级练习2（增删改）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。