当前位置：首页 > 资讯 > 技术文档

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

时间：2022-03-02 13:41 编辑：来源：阅读：
扫一扫，手机访问

摘要：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>

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

全部评论(0)

资讯排行榜
更多>>