JS动态添加Table的TR,TD实现方法
本文实例讲述了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程序设计有所帮助。