JS动态添加Table的TR，TD实现方法

2024-05-06 16:15:28

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JS动态添加Table的TR，TD实现方法,涉及js针对Table中TR、TD节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS动态添加Table的TR，TD实现方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

		<html>  
		<head> 
		<title></title> 
		<SCRIPT language="JavaScript"> 
		var tempRow=0; 
		var maxRows=0; 
		function insertRows(){ 
		tempRow=table1.rows.length-1; 
		maxRows=tempRow; 
		tempRow=tempRow+1; 
		var Rows=table1.rows;//类似数组的Rows 
		var newRow=table1.insertRow(table1.rows.length);//插入新的一行 
		var Cells=newRow.cells;//类似数组的Cells 
		for (i=0;i<2;i++)//每行的7列数据 
		{ 
		var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
		newCell.align="center"; 
		switch (i) 
		{ 
		case 0: newCell.innerHTML="<td valign='top'>corpName</TD>"; break; 
		case 1 : newCell.innerHTML="<td valign='top'><a href='javascript:delTableRow(/""+tempRow+"/")'>删除</a></TD>"; break; 
		} 
		} 
		maxRows+=1; 
		} 
		function delTableRow(rowNum){ 
		if (table1.rows.length >rowNum){ 
		table1.deleteRow(rowNum); 
		} 
		} 
		</SCRIPT> 
		</head> 
		<body> 
		<form action=""> 
		<table border="0" cellspacing="0" cellpadding="0" width="98%" align="center"> 
		<tr valign="top"> 
		<th> 
		<input value="添加" type="button" onclick="insertRows()"> 
		</th> 
		</tr> 
		</table> 
		<br /> 
		<table border="1" width="98%" align="center" id="table1"> 
		<tr> 
		<th >企业名称</th> 
		<th>操作<th> 
		</tr> 
		</table> 
		</form> 
		</body> 
		</html>