怎样用JAVASCRIPT实现表行的动态增加和删除?

<script>
function createTable()
{
var vTable=document.createElement("table");
vTable.cellPadding="0";
vTable.cellSpacing="0";
vTable.border="1";
vTable.color="#000000";
vTable.borderColorDark="#000000";
vTable.borderColorLight="#FFFFFF";
for(kIndex=0;kIndex<5;kIndex++)
{
var vTr=vTable.insertRow(kIndex);
for(iIndex=0;iIndex<5;iIndex++)
{
vTd=vTr.insertCell(iIndex);
vTd.innerHTML="<input type=text style='border:0px solid'>";
}
}
DivID.appendChild(vTable);
}
</script>
<input type=button value="创建表格" onclick="createTable();">
<div id="DivID"></div>

解决方案 »

  1.   

    http://www.blueidea.com/bbs/archivecontent.asp?id=697036
      

  2.   

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="43%">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="table1">
            <tr id="tr1">
              <td width="24%" id="td1">1</td>
              <td width="29%">2</td>
              <td width="47%">3</td>
            </tr>
            <tr>
              <td>2</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>3</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>4</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table></td>
        <td width="57%"><form name="form1" method="post" action="">
            <p>
              <input type="button" name="Submit2" value="添加一行" onClick="func1();">
              <input type="button" name="Submit" value="changetd" onClick="func2();">
              <input type="button" name="Submit3" value="changetd111" onClick="func3();">
              <input type="button" name="Submit4" value="行数" onClick="func4();">
            </p>
            <p> 
              <input type="text" name="textfield" size="2">
              <input type="button" name="Submit5" value="删除指定行" onClick="func5()">
              <input type="button" name="Submit6" value="删除末行" onClick="func6()">
            </p>
          </form></td>
      </tr>
    </table>
    <p>
      <script language="JavaScript" type="text/JavaScript">
    var i=0;
    function func1(){
    var newrow = document.all("table1").insertRow();
      for(i=0;i<3;i++){
        var newcell = newrow.insertCell();    newcell.innerText=i;
    //alert(newrow.innerHTML);
          }
    }
    function func2(){
    i++;
    var opttd = document.all("td1");
    opttd.innerText = "changed"+i;
    }
    function func3(){
    var opttr = document.all("tr1");
    opttr.cells(0).innerHTML="11111111111111111111";
    }
    function func4(){
    var tab1 = document.all("table1");
    alert(tab1.rows.length);
    }
    function func5(){
    var tab1 = document.all("table1");
    tab1.deleteRow(document.form1.textfield.value);
    }
    function func6(){
    var tab1 = document.all("table1");
    tab1.deleteRow(tab1.rows.length-1);
    }
    </script>
    </p>
      

  3.   

    <style>
    .trOdd{background-color:#cccccc}
    .trEven{background-color:#ffffff}
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function add()
    {
        var oTable = document.all.table1;
        var oTr = document.createElement("tr");
        var oTd1 = document.createElement("td");
        var oTd2 = document.createElement("td");
        var oTd3 = document.createElement("td");
        oTd1.innerText = "1";
        oTd2.innerText = "2";
        oTd3.innerText = "3";
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        oTr.appendChild(oTd3);
        oTable.children[0].appendChild(oTr);
        setRowColor(oTable,'trEven','trOdd')
    }function setRowColor(oTable,evenClass,oddClass)
    {
        resetTableColor(oTable);
        for(var i=1; i<oTable.rows.length; i++)
        {
            if(i % 2 == 0)
                oTable.rows[i].className = evenClass;
            else
                oTable.rows[i].className = oddClass;
        }
    }
    function resetTableColor(oTable)
    {
        for(var i=1; i<oTable.rows.length; i++)
        {
            oTable.rows[i].className = "";
            for(var j=0; j<oTable.rows[i].cells.length; j++)
                oTable.rows[i].cells[j].className = "";
        }
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onload="setRowColor(table1,'trEven','trOdd')">
    <TABLE width="50%" cellspacing="0" id="table1" border=1>
    <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    </TR>
    <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    </TR>
    </TABLE>
    <p>
    <input type=button value=add onclick="add()">
    <input type=button value=del onclick="del(2)">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function del(num)
    {
        table1.rows[num].removeNode(true);
    setRowColor(table1,'trEven','trOdd')
    }
    //-->
    </SCRIPT>
    </BODY>