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>