开发日志：使用JavaScript添加/修改/删除Table表单

最新推荐文章于 2019-09-22 23:19:17 发布

原创最新推荐文章于 2019-09-22 23:19:17 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

开发日志同时被 2 个专栏收录

34 篇文章

订阅专栏

DIV+CSS

11 篇文章

订阅专栏

这篇开发日志探讨了使用JavaScript处理HTML Table时遇到的问题，包括FF和IE浏览器的差异，以及在删除行时因动态长度导致的错误。文章通过实例展示了如何正确地添加、修改和删除表格行，并提供了两种不同的删除行方法，强调了添加行时设置行ID的重要性。

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

JS代码

<script  type="text/javascript">
function addRows(){//添加多行数据
	var myTable = document.getElementById("myTable");//取得tableObject对象
	for(i = 0;i<=4;i++){//这里写4行
		var oCell;
		var oRow=myTable.insertRow(-1);//获取末尾一行oRow.id=id和oRow.name=name可以设置行的属性，根据需求可用于删除指定行//
		oCell=oRow.insertCell(-1);oCell.innerHTML="图片<img src='myURL'/>";
		oCell=oRow.insertCell(-1);oCell.innerHTML="<a>超链接</a>";	
		oCell=oRow.insertCell(-1);oCell.innerHTML="带事件的按钮<input  type='button' value='删除第一行以外的行' onclick='deleRows()'/>";
  
	}
}
function deleRows(){//删除第一行以外的行
var myTable = document.getElementById("myTable");//取得tableObject对象
//思路：1我们要保留第一行数据，2每当删除一行rows.length的值就会自动减1。
//因此只需要一直删除第2行，直至rows的长度等于1的时候就只剩下第一行了【rows[0]】，如果要全部删除就让i一直等0
 for(i=1;i<myTable.rows.length;i=1){
          myTable.deleteRow(i);
	  } 
}

function addStypeRow(){
	   //insertRow和insertCell是Table对象的方法，insertRow(0)表示第一行，-1表示最后一行，虽然IE默认-1，写成insertRow()也可以执行，但由于FF没有默认值，为了兼容最好写成insertRow(-1)
		var myTable = document.getElementById("myTable");//取得tableObject对象
		var oCell;
		var oRow=myTable.insertRow(-1);//获取末尾一行
		oCell=oRow.insertCell(-1);
		oCell.colSpan = "3";//合并3行
		//使用style
		oCell.style.background = "#FFFF00"
		oCell.style.textAlign = "center"//关于这些属性有"-"的,要去掉"-",并把后面的首字母改成大写就OK了。该属性也可以使用oCell.align ="center";代替
		oCell.innerHTML="行内容居中，合并3列的行";
}
</script>

HTML代码

<body>
<table id="myTable" style="border:1px solid red" width="100%">
	<tr>
    <td width="33%"><input  type="button" value="在末尾添加多行" onclick="addRows()"/></td>
    <td width="33%"><input  type="button" value="在末尾添加一行，要求格式：内容居中，合并3列" onclick="addStypeRow()"/></td>
    <td width="33%"><input  type="button" value="删除第一行以外的行" onclick="deleRows()"/></td>
    </tr>
</table>
</body>

教训：

一需要注意FF和IE浏览器的不同

二删除行的时候习惯使用i++的格式，没有注意到rows的length在动态减少，结果i在增加的时候length却在减少，造成部分行没删除的错误

以全删为例，假设有2行要删，rows.length=2，循环写成for(i=0;i<rows.length;i++)

第一次循环时将rows[0]删除，但第一次循环结束后，i自增为1，而rows.length自动减1，结果原rows[1]变成了rows[0]，而判断i<rows.length等于1<1等于false，因此跳出循环，第二行没有被删除】

删除行记录

方法一：通过对象本事删除行记录

添加行的时

oCell=oRow.insertCell(-1);oCell.align ="center";oCell.innerHTML="<img src='images/cross_circle.png' title='删除' onclick='del(this)'>";//事件改为【onclick='this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement)'】可以删除本行

function del(obj){
	alert(obj.parentElement.parentElement.id);//可通过parentElement获取你需要的属性，如id、name等	
	obj.parentElement.parentElement.parentElement.removeChild(obj.parentElement.parentElement)；//解释：对象本身，即img标签，他的父节点是td,td的父节点是tr，tr的父节点是table；因此上面的语句就是img所在的table，去除img所在的tr
			}

方法二：加入根据行ID删除记录

添加行时，设置好行的id

oRow.id = "myId001";
oRow.name = "自定义ID"

方法

function delTableRow(tid){	//删除一行记录，传入行的ID，
	var id = tid;
	var objs;
    if(navigator.userAgent.indexOf("Firefox")>0){//如果是火狐浏览器
	    objs = document.getElementById("Nextinfo");
    }else{
       objs=document.all.Nextinfo;
    }
    for(i=1;i<objs.rows.length;i++){//遍历
		var row=objs.rows[i];
		if(row.id==id){//找到id相同的将其删除
			objs.deleteRow(i);
			i--;//行记录-1
			//break;如果你确定该行只有1条row.id==id的记录，可以不用i--，直接退出循环即可
		}
    }
}