| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| td, th { | |
| height: 40px; | |
| line-height: 25px; | |
| width: 250px; | |
| font-size: 25px; | |
| } | |
| .active { | |
| border: none; | |
| outline: none; | |
| font-size: 25px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table border="1" cellspacing="0" style="text-align: center;"> | |
| <tr style="background: #ccc"> | |
| <th>商品名称</th> | |
| <th>数量</th> | |
| <th>单价</th> | |
| <th>操作</th> | |
| </tr> | |
| <tbody id="table"> | |
| <tr> | |
| <td>玫瑰保湿睡眠面膜</td> | |
| <td>5</td> | |
| <td>¥48</td> | |
| <td> | |
| <input type="button" value="删除" onclick="remove(this)"> | |
| <input type="button" value="修改" onclick="change(this)"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan="4"><input type="button" value="增加订单" id="btn"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <script> | |
| var oBtn = document.getElementById("btn"); | |
| //声明按钮 | |
| var oTab = document.getElementById("table"); | |
| // 声明主体 | |
| var i = 0; | |
| //声明一个变量i等于0 | |
| oBtn.onclick = function () { | |
| //按钮点击发生事件函数 | |
| i++; | |
| // 按钮被点击一次i加一 | |
| var oTr = document.createElement("tr"); | |
| // 声明一个新的tr 创建一个新的tr为oTr | |
| oTr.innerHTML = ` | |
| <td>玫瑰保湿睡眠面膜</td> | |
| <td>5</td> | |
| <td>¥48</td> | |
| <td> | |
| <input type="button" class="del" value="删除" οnclick="remove(this)"> | |
| <input type="button" value="修改" οnclick="change(this)"> | |
| </td> | |
| ` | |
| // 新的tr oTr的主体是什么 // 后面的onclick为指定函数remove 点击触发函数remove | |
| // 后面第二个的onclick为指定函数change 点击触发函数change | |
| oTab.insertBefore(oTr, oTab.lastElementChild); | |
| // 将创建的oTr放到oTab的最后一个元素前面 | |
| } | |
| function remove(that) { | |
| //函数remove 后面为函数参数 | |
| console.log(that); | |
| // 打印出删除的数据 点击remove发生的事件 | |
| oTab.removeChild(that.parentNode.parentNode) | |
| //删除oTab的父节点的父节点 指的就是前面加的tr | |
| } | |
| function change(that) { | |
| //函数change that指的是对应函数的元素 | |
| that.value = "确认"; | |
| // 对面函数的元素值变成确认 就是input的value值 | |
| var Ipt = document.createElement("input"); | |
| //声明创建一个新的input | |
| Ipt.className = "active"; | |
| //定义新的input的类名和属性 属性在前面的style中 | |
| Ipt.value = that.parentNode.parentNode.firstElementChild.innerHTML; | |
| //新的input的value值为这个元素父节点的父节点的一个元素的内容 | |
| that.parentNode.parentNode.firstElementChild.innerHTML = ""; | |
| // 让这个父节点的父节点的第一个元素内容为空 | |
| that.parentNode.parentNode.firstElementChild.appendChild(Ipt); | |
| // 将前面的新input放入父节点的父节点的第一个元素 | |
| that.onclick = function () { | |
| //当这个按钮在value为确认情况下呗点击时的函数 | |
| sure(this) | |
| //函数sure生效 下面是对应的sure函数 | |
| } | |
| } | |
| function sure(that) { | |
| //定义一个函数sure 承接前面的函数 | |
| console.log(that); | |
| var otd = that.parentNode.parentNode.firstElementChild; | |
| // 将第一个元素的内容赋值给otd | |
| that.value = "修改"; | |
| //将这个按钮的value值变成修改 | |
| otd.innerHTML = otd.firstElementChild.value; | |
| // 将前面input中的value值赋给otd | |
| that.onclick = function () { | |
| //再次点击该按钮是触发的函数 | |
| change(this) | |
| //这个按钮触发之后，实行函数change | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
260
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
