本文介绍了一种使用JavaScript来动态删除HTML表格中指定行的方法。通过为每个删除按钮分配唯一的ID并将其作为参数传递给JavaScript函数，可以轻松地隐藏（逻辑删除）表格中的特定行。此方法适用于简单的网页应用程序，尤其是需要用户交互式管理数据的场景。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function del(tr){
document.getElementById(tr).style.display="none";
}
</script>
</head>
<body>
<table style="border:1px;">
<tr id="tr1" >
<td>1</td>
<td>2</td>
<td><a href="javascript:void(0);" οnclick="del('tr1')">删除</a></td>
</tr>
<tr id="tr2"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr2')">删除</a></td></tr>
<tr id="tr3"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr3')">删除</a></td></tr>
<tr id="tr4"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr4')">删除</a></td></tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function del(tr){
document.getElementById(tr).style.display="none";
}
</script>
</head>
<body>
<table style="border:1px;">
<tr id="tr1" >
<td>1</td>
<td>2</td>
<td><a href="javascript:void(0);" οnclick="del('tr1')">删除</a></td>
</tr>
<tr id="tr2"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr2')">删除</a></td></tr>
<tr id="tr3"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr3')">删除</a></td></tr>
<tr id="tr4"><td>1</td><td>2</td><td><a href="javascript:void(0);" οnclick="del('tr4')">删除</a></td></tr>
</table>
</body>
</html>
扫一扫
4010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
