javascript操作table的动态添加行和删除行

时间：2022-02-02 09:39:47

动态添加表格行和删除行，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>


标签：

相关文章