求各位大神解决javascript中表格的新增加列的删除问题

萤火虫塔莉 2015-07-13 05:01:29

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

	window.onload=function(){

		var otab=document.getElementById("tab1");

		var obtn=document.getElementById("btn1");

		var user=document.getElementById("user");

		var age=document.getElementById("age");

		var otr=otab.tBodies[0].rows;

		var oID=parseInt(otr[otr.length-1].cells[0].innerHTML)+1;

	

		obtn.onclick=function(){

			var otr1=document.createElement("tr");

			

			var otd=document.createElement("td");

			otd.innerHTML=oID++;

			otr1.appendChild(otd);

			

			var otd=document.createElement("td");

			otd.innerHTML=user.value;

			otr1.appendChild(otd);

			

			var otd=document.createElement("td");

			otd.innerHTML=age.value;

			otr1.appendChild(otd);

			

			var otd=document.createElement("td");

			otd.innerHTML='<a href="javascript:;">删除</a>';

			otr1.appendChild(otd);

						

			otab.tBodies[0].appendChild(otr1);

			

		};

		

		for(var i=0;i<otab.tBodies[0].rows.length;i++){

			otab.tBodies[0].rows[i].cells[3].getElementsByTagName("a")[0].onclick=function(){

				otab.tBodies[0].removeChild(this.parentNode.parentNode);//删除节点

			};

		}

		

	};

</script>

</head>



<body>

	姓名：<input type="text" id="user" />

	年龄：<input type="text" id="age" />

	<input type="button" id="btn1" value="添加"/>

	<table id="tab1" border="1" width="400">

		<thead>

			<td>ID</td>

			<td>姓名</td>

			<td>年龄</td>

			<td>操作</td>

		</thead>

		<tbody>

			<tr>

				<td>1</td>

				<td>blue</td>

				<td>28</td>

				<td><a href="javascript:;">删除</a></td>

			</tr>

			<tr>

				<td>2</td>

				<td>tom</td>

				<td>32</td>

				<td><a href="javascript:;">删除</a></td>

			</tr>

			<tr>

				<td>3</td>

				<td>张三</td>

				<td>22</td>

				<td><a href="javascript:;">删除</a></td>

			</tr>

			<tr>

				<td>4</td>

				<td>李四</td>

				<td>28</td>

				<td><a href="javascript:;">删除</a></td>

			</tr>

			<tr>

				<td>5</td>

				<td>王五</td>

				<td>23</td>

				<td><a href="javascript:;">删除</a></td>

			</tr>

		</tbody>

	</table>

</body>

</html>

增加正常，但是新增加的列删除不了，这是为什么？

...全文

75 4 打赏收藏举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

萤火虫塔莉 2015-07-13

打赏
举报

引用 3 楼 u011376884 的回复:

[quote=引用 2 楼 sinat_27088253 的回复:] 为什么放到下面新添加的行就绑定不上事件？

window.onload=function(){}只是在页面初始/刷新的时候执行一次，那个时候你的页面还没有新加的行，对应的事件就不会绑定[/quote] 明白了，感谢！

逝_去_的_光_阴 2015-07-13

打赏
举报

引用 2 楼 sinat_27088253 的回复:

为什么放到下面新添加的行就绑定不上事件？

window.onload=function(){}只是在页面初始/刷新的时候执行一次，那个时候你的页面还没有新加的行，对应的事件就不会绑定

萤火虫塔莉 2015-07-13

打赏
举报

引用 1 楼 u011376884 的回复:

otab.tBodies[0].appendChild(otr1); 后面再加上下面的循环就行 for(var i=0;i<otab.tBodies[0].rows.length;i++){ otab.tBodies[0].rows[i].cells[3].getElementsByTagName("a")[0].onclick=function(){ otab.tBodies[0].removeChild(this.parentNode.parentNode);//删除节点 }; } 说白了就是你新填加的行没有绑定上删除的事件

为什么放到下面新添加的行就绑定不上事件？

逝_去_的_光_阴 2015-07-13

打赏
举报

otab.tBodies[0].appendChild(otr1); 后面再加上下面的循环就行 for(var i=0;i<otab.tBodies[0].rows.length;i++){ otab.tBodies[0].rows[i].cells[3].getElementsByTagName("a")[0].onclick=function(){ otab.tBodies[0].removeChild(this.parentNode.parentNode);//删除节点 }; } 说白了就是你新填加的行没有绑定上删除的事件

相关推荐

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

JTable table = new JTable();DefaultTableModel tableModel = (DefaultTableModel)table.getModel();1、增加列：tableModel.addColumn("新列名");删除列：table.removeColumn(table.getColumnModel().getColumn(columnIndex));/...