当前位置：首页 → 问答吧 → HTML使用JS动态删除某行

HTML使用JS动态删除某行

时间：2011-09-01

来源：互联网

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行删除掉，这样的功能该如何实现啊？
求助。。。

作者: silencelvwei520 发布时间: 2011-09-01

con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del(this)'>"

function del(obj){
var row = getAncestry(obj, "tr");
// 取得rowIndex，进行删除行
}

function getAncestry(obj, name){
if(!obj) {
if(obj.nodeName == name) {
return obj;
} else {
obj = obj.parentNode;
getAncestry(obj, name);
}
}
}

大概就是这样子的。。js函数可能有一些错误，我暂时没环境调试

作者: jnhcd 发布时间: 2011-09-01

引用 1 楼 jnhcd 的回复:

con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del(this)'>"

function del(obj){
var row = getAncestry(obj, "tr");
// 取得rowIndex，进行删除行
}

function getAncestr……

好像有些问题啊，得到的row是undefined

作者: silencelvwei520 发布时间: 2011-09-01

con4.innerHTML="<input type='button' id='"+(rows-1)+"' value='删除' onClick='del(this)'>" //动态添加一个删除按钮
}

function del(id)
{
document.getElementById('tab').deleteRow(this.id)
}
这样就ok

作者: jike316 发布时间: 2011-09-01

HTML使用JS动态删除某行

热门阅读

热门下载