首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

HTML使用JS动态删除某行解决办法

2012-01-28 
HTML使用JS动态删除某行HTML codehtml xmlnshttp://www.w3.org/1999/xhtmlheadtitle无标题文档/

HTML使用JS动态删除某行

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
[解决办法]
探讨

引用:

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

function del(id)
{
document.getElementById('tab').deleteRow(thi……

热点排行