动态增加删除表格行(兼容IE/FF)

作者: 来源: 日期:2007-2-1

相关阅读:如何正确地给 table 追加 tr

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com

var rowIndex = 0;

function addLine(obj)
{
    var objSourceRow = obj.parentNode.parentNode;
    var objTable = obj.parentNode.parentNode.parentNode.parentNode;
    if(obj.value == '增加')
    {
        rowIndex++;
        var objRow = objTable.insertRow(rowIndex);
        var objCell;
        
        objCell = objRow.insertCell(0);
        objCell.innerHTML = "&nbsp;"; 
        
        objCell = objRow.insertCell(1);
        objCell.innerHTML = objSourceRow.cells[1].innerHTML;
        
        objCell = objRow.insertCell(2);
        objCell.innerHTML = objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
    }
    else
    {
        objTable.lastChild.removeChild(objSourceRow);
        rowIndex--;
    }
}

function removeLine()
{
 
}
//-->
</script>
</head>

<body bgcolor="#ffffff">

<form name="form1" method="post">
  <table width="400" border="0">
    <tr>
      <td>基本信息</td>
      <td>
        <select name="select">
          <option value="" selected>选择</option>
          <option value="1">第一</option>
          <option value="2">第二</option>
        </select>
      </td>
      <td>
        <input name="basicinfo" type="text" id="basicinfo">
        <input name="add" type="button" id="add" value="增加" onClick="addLine(this)">
      </td>
    </tr>
    <tr>
      <td>其它信息</td>
      <td>&nbsp;</td>
      <td><input type="text" name="textfield"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

</body>

</html>

网友评论

  • 这种方法数据量大了慢死人.(222.183.*.* 2007-03-09 00:19:18)
相关文章