javascript点击删除表格一列
最近有同学问我如何点击删除购物车的一列。我想想我是用react的，只需要删除数据中的一列，然后视图就自动删除了。但是这儿就必须用原生js，那只好去网上找找了。然后写了个列子，供大家参考吧。
<html>
<head>
<style>
table, td {
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<p>点击x删除</p>
<table id="myTable">
<tr id=1>
<td>zsl 1</td>
<td><a onClick="myFun(1)">点击删除</a></td>
</tr>
<tr id=2>
<td>cell 3</td>
<td><a onClick="myFun(2)">点击删除</a></td>
</tr>
<tr id=3>
<td>cell 5</td>
<td><a onClick="myFun(3)">点击删除</a></td>
</tr>
<tr id=4>
<td>cell 7</td>
<td><a onClick="myFun(4)">点击删除</a></td>
</tr>
</table>
<br>
<script>
function myFun(i){
var row = document.getElementById(i);
var table = row.parentNode;
console.log(table.tagName)
while ( table && table.tagName != 'TABLE' ){
table = table.parentNode; console.log(table.tagName);
}
if ( !table )
return;
table.deleteRow(row.rowIndex);
}
</script>
</body>
</html>## 思路
- 通过id找到对应的row
- 通过递归找到table级别的父节点
- 调用deleteRow 删除row