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;

	}
Ajax动态表格，可适时添加行、删除行、复制行
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
table JS 添加行和删除行
在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义，每...
JS动态添加、删除Table行排序（删除整行、删除整列）
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....
动态增加删除行.html
标题中的“动态增加删除行.html”暗示我们这篇内容可能与前端开发有关，特别是涉及到HTML页面中动态操作表格（table）的行（row）增删功能。这种技术在Web应用程序中非常常见，允许用户交互式地管理数据展示。下面将...
js获取table行 列 的值
HTML 中的 `<table>` 元素是用来显示表格数据的标准方式之一，而使用 JavaScript 来操作这些表格中的数据则非常常见。下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`...
Web 开发

81,122

社区成员

341,744

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章