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程序设计有所帮助。