HTML使用JS动态删除某行解决办法
日期：2014-05-18 浏览次数：20871 次
HTML使用JS动态删除某行
比如我添加了10行数据，我点击第4行的删除按钮，就能把第4行删除掉，这样的功能该如何实现啊？
求助。。。
------解决方案--------------------
con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del(this)'>" //动态添加一个 删除按钮
}
function del(id)
{
document.getElementById('tab').deleteRow(this.id)
}
这样就ok
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
</head>
<script>
function btnClick()
{
var rows = document.getElementById("tab").rows.length; //获取行数
var tablie = document.getElementById("tab").insertRow(rows-1); //总是在最后一行插入数据
var con = tablie.insertCell(0); //获取第一个单元格对象
con.innerHTML=rows; //赋值
var con1 = tablie.insertCell(1); //获取第一个单元格对象
con1.innerHTML= "123"; //赋值
var con2 = tablie.insertCell(2); //获取第二个单元格对象
con2.innerHTML="234"; //赋值
var con3 = tablie.insertCell(3); //获取第三个单元格对象
con3.innerHTML="345"; //赋值
var con4 = tablie.insertCell(4); //获取第四个单元格对象
con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del()'>" //动态添加一个 删除按钮
}
function del()
{
//不知道怎么写
}
</script>
<style>
table{
border-collapse:collapse;
}
td{
border:solid 1px #f00;
}
#btn{
text-align:center;
}
</style>
<body>
<table id="tab">
<tr>
<td>1</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td><input type="button" id="btn" value="删除"></td>
</tr>
<tr>
<td colspan="5" align="center"><input type="button" onClick="btnClick()" value="增加"></td>
</tr>
</table>
<input type="text" id="txt" value="">
</body>
</html>
比如我添加了10行数据，我点击第4行的删除按钮，就能把第4行删除掉，这样的功能该如何实现啊？
求助。。。
------解决方案--------------------
con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del(this)'>" //动态添加一个 删除按钮
}
function del(id)
{
document.getElementById('tab').deleteRow(this.id)
}
这样就ok
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
