微客导航 » 文章资讯 » JS动态添加Table的TR，TD实现方法

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

2024-04-04 16:34:04 438

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

<html> 

<head>

<title></title>

<SCRIPTlanguage="JavaScript">

vartempRow=0;

varmaxRows=0;

functioninsertRows(){

tempRow=table1.rows.length-1;

maxRows=tempRow;

tempRow=tempRow+1;

varRows=table1.rows;//类似数组的Rows

varnewRow=table1.insertRow(table1.rows.length);//插入新的一行

varCells=newRow.cells;//类似数组的Cells

for(i=0;i<2;i++)//每行的7列数据

{

varnewCell=Rows(newRow.rowIndex).insertCell(Cells.length);

newCell.align="center";

switch(i)

{

case0:newCell.innerHTML="<tdvalign='top'>corpName</TD>";break;

case1:newCell.innerHTML="<tdvalign='top'><ahref='javascript:delTableRow(\""+tempRow+"\")'>删除</a></TD>";break;

}

}

maxRows+=1;

}

functiondelTableRow(rowNum){

if(table1.rows.length>rowNum){

table1.deleteRow(rowNum);

}

}

</SCRIPT>

</head>

<body>

<formaction="">

<tableborder="0"cellspacing="0"cellpadding="0"width="98%"align="center">

<trvalign="top">

<th>

<inputvalue="添加"type="button"onclick="insertRows()">

</th>

</tr>

</table>

<br/>

<tableborder="1"width="98%"align="center"id="table1">

<tr>

<th>企业名称</th>

<th>操作<th>

</tr>

</table>

</form>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐