<!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="删除" onclick="remove(this)"> | |
<input type="button" value="修改" onclick="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> |
添加商品和修改信息!
猜你喜欢
转载自blog.csdn.net/le_oop/article/details/80818988
今日推荐
周排行