JS 表格节点操作
实现的功能:
在表格中实现添加商品,删除商品和修改商品。
实现效果如图所示:
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function add_shop(){//添加商品
var s_name=prompt("请输入商品名称:");
var s_num=prompt("请输入商品数量:");
var s_price=prompt("请输入商品价格:");
var table=document.getElementsByTagName("table")[0];
var tr=table.insertRow(1);
var td1=tr.insertCell(0);
td1.innerText=s_name;
var td2=tr.insertCell(1);
td2.innerText=s_num;
var td3=tr.insertCell(2);
td3.innerText=s_price;
var td3=tr.insertCell(3);
td3.innerHTML="<td><input type='button' value='删除' onclick='del_shop(this)'> <input type='button' value='修改' onclick='modify_num(this)'></td>";
}
function del_shop(cell){//删除商品
var tr=cell.parentNode.parentNode;//input --> td --> tr
var table=document.getElementsByTagName("table")[0]
table.deleteRow(tr.rowIndex);
}
function modify_num(cell){//修改商品
var tr=cell.parentNode.parentNode.cells;//input --> td --> tr
for(var i=0;i<tr.length-1;i++) {
if (cell.value == "修改") {
var value = tr[i].innerText;//获取当前td里面的值
tr[i].innerHTML = "<input type='text' value='" + value + "'>";
}else {
tr[i].innerHTML = tr[i].firstElementChild.value;
}
}
if(cell.value == "修改"){
cell.value = "确定";
}
else{cell.value = "修改";
}
}
</script>
</head>
<body align="center">
<table border="1" align="center">
<tr>
<td width="200">商品名称</td>
<td width="200">数量</td>
<td width="200">价格</td>
<td width="200">操作</td>
</tr>
<tr>
<td>C从入门到住院</td>
<td>8</td>
<td>¥78</td>
<td>
<input type="button" value="删除" onclick="del_shop(this)">
<input type="button" value="修改" onclick="modify_num(this)">
</td>
</tr>
<tr>
<td>集思广益</td>
<td>7</td>
<td>¥89</td>
<td>
<input type="button" value="删除" onclick="del_shop(this)">
<input type="button" value="修改" onclick="modify_num(this)">
</td>
</tr>
<tr>
<td>大成java</td>
<td>0</td>
<td>¥99</td>
<td>
<input type="button" value="删除" onclick="del_shop(this)">
<input type="button" value="修改" onclick="modify_num(this)">
</td>
</tr>
<tr>
<td>大数据的智慧</td>
<td>4</td>
<td>¥103</td>
<td>
<input type="button" value="删除" onclick="del_shop(this)">
<input type="button" value="修改" onclick="modify_num(this)">
</td>
</tr>
<tr>
<td>语言的艺术</td>
<td>2</td>
<td>¥98</td>
<td>
<input type="button" value="删除" onclick="del_shop(this)">
<input type="button" value="修改" onclick="modify_num(this)">
</td>
</tr>
<tr>
<td colspan="4"><input type="button" onclick="add_shop()" value="增加一行"></td>
</tr>
</table>
</body>
</html>