javascript操作table的动态添加行和删除行_javacript 给table添加行-优快云博客

本文介绍了一个使用HTML、CSS及JavaScript实现的动态表格案例，在IE9和Chrome浏览器中经过验证。该案例支持用户通过按钮来增加或删除表格行，并自动更新行号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加表格行和删除行，ie9和chrome上运行通过：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>长江三峡通航管理局</title>
<!--border-collapse:collapse; 设置折叠边框-->
<style type="text/css">
	
	table
	{	
		//border-collapse:collapse;
	}
	table,th, td
	{
		border: 1px solid black;
	}

	#tb .td1{
		width:10%;
	}
	#tb .td2{
		width:40%;
	}
	#tb .td3{
		width:40%;
	}
	#tb .td4{
		width:10%;
	}
</style>

<script type="text/javascript">
//判断浏览器类型：
  function isIE(){
	  return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
  }

  

  function isChrome(){
	  return navigator.userAgent.indexOf("Chrome") > -1;
  }

//点击按钮删除一行
function deleteRow(){
	//找到当前行在table中的下标
	//ie:
	var currentIndex=this.parentNode.parentNode.rowIndex;
	if(isChrome())
		currentIndex=this.parentNode.parentNode.sectionRowIndex+2; 
	document.getElementById("tb").deleteRow(currentIndex);
	
	//当删除当前行之后要遍历删除行后面所有的的行 ，改变序号：
	var rows=document.getElementById("tb").rows;
	//因为已经删除了一行，所以此处从currentIndex开始相当于是删除后的第一行
	for(var i=currentIndex;i<rows.length;i++){
		rows[i].cells[0].innerHTML=parseInt(rows[i].cells[0].innerHTML)-1;
	}
	
}
	
//点击按钮添加一行	
function addRow(){
	try{
		var table=document.getElementById("tb");
		var newRow=document.createElement("tr");
		var column1=document.createElement("td");
		var rowIndex=table.rows.length-1;  //添加新行的序号
		column1.innerHTML=rowIndex;
		var column2=document.createElement("td");
		column2.innerHTML="<input type='text' name='imgPath' style='border:none'>";
		var column3=document.createElement("td");
		column3.innerHTML="<input type='text' name='imgLink' style='border:none'>";
		var column4=document.createElement("td");
		var deleteBt=document.createElement("button");
		deleteBt.innerHTML="删除";
		deleteBt.onclick=deleteRow;
		column4.appendChild(deleteBt);
		newRow.appendChild(column1);
		newRow.appendChild(column2);
		newRow.appendChild(column3);
		newRow.appendChild(column4);
		table.appendChild(newRow);
	}
	catch(e){
		alert(e.message);
	}
}

</script>
</head>
<body>
	<table id="tb">
		<tr><td colspan="4" align="right"><input type="button" value="添加" id="addRow" onclick="addRow()"></td></tr>
		<tr>
			<td class="td1">序号</td>
			<td class="td2">图片路径</td>
			<td class="td3">图片地址</td>
			<td class="td4">操作</td>
		</tr>
	

	</table>
</body>
</html>