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>