HTML使用JS动态删除某行

KevinNeo 2011-09-01 12:03:05

<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行删除掉,这样的功能该如何实现啊?
求助。。。
...全文
270 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
2399 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
KevinNeo 2011-09-01
  • 打赏
  • 举报
回复
[Quote=引用 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……
[/Quote]

好像有些问题啊,得到的row是undefined
jnhcd 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函数可能有一些错误,我暂时没环境调试
lixu1988714 2011-09-01
  • 打赏
  • 举报
回复
function deleteRow(obj){
var row=obj.parentNode.parentNode;
row.removeNode(true);
}


在button调用函数时传入参数this
KevinNeo 2011-09-01
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 codeallen 的回复:]

引用 5 楼 silencelvwei520 的回复:

引用 3 楼 jike316 的回复:

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

function del(id)
{
document.getE……
[/Quote]

不懂JQuery ... 请指教...
codeallen 2011-09-01
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 silencelvwei520 的回复:]

引用 3 楼 jike316 的回复:

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

function del(id)
{
document.getElementById('tab').deleteRow(thi……
[/Quote]
你这样要为表格tr设id侵入性太高,使用jQuery很简单就可以完成,不知道楼主要代码不?jQuery的写法
KevinNeo 2011-09-01
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 jike316 的回复:]

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

function del(id)
{
document.getElementById('tab').deleteRow(this.id)
}
这样就ok
……
[/Quote]

你的这个方法还是有点问题,我做了下改进以后,达到目的了~

<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+"' value='删除' onClick='del(this.id)'>" //动态添加一个 删除按钮
}

function del(id)
{
alert(id);
document.getElementById("tab").deleteRow(id-1);
}

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

</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>
</body>
</html>


就是这样~ 能够删除指定的一行了
softroad 2011-09-01
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 jike316 的回复:]

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

function del(id)
{
document.getElementById('tab').deleteRow(this.id)
}
这样就ok
……
[/Quote]

document.getElementById("tab").getElementsByTagName("tr")[id - 1].style.display = "none";

测试下。ls方法可能有问题呢。
黑心 2011-09-01
  • 打赏
  • 举报
回复

//<input type=button value=删除 onclick="deleteRow(document.getElementById('myTable'),event);">
//myTable是table的ID
function deleteRow(obj,v){
var currRow;
var o=v.srcElement || v.target;
if(o.tagName=="INPUT"){
currRow=o.parentNode.parentNode.parentNode.rowIndex;
}
var rows=obj.rows.length;
obj.deleteRow(currRow);
}
mc_peng 2011-09-01
  • 打赏
  • 举报
回复


function deleteTheRow(obj) {
var oTr = obj?obj:(getEvent().target?getEvent().target:getEvent().srcElement);
while(oTr.tagName!="TR") {
oTr = oTr.parentNode;
}
var oTable = oTr;
var index = oTr.rowIndex;
while(oTable.tagName!="TABLE") {
oTable = oTable.parentNode;
}
oTable.deleteRow(index);
return oTr;
}

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧