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

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

2021-07-28 16:07JS教程网 JavaScript

这篇文章主要介绍了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>