100分急求！能不能给个通过js，添加和删除html中一个表格内容的例子。

<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);
}
function mouseDown()
{
if(event.button==2)
{
if(event.srcElement.tagName=="INPUT")
{
window.confirm(event.srcElement.value);
}
}
}
document.onmousedown=mouseDown;
document.captureEvents(Event.MOUSEDOWN);
</script>
<input type=button value="创建表格" onclick="createTable();">
<div id="DivID"></div>

解决方案 »

  1.   

    <table id="idTB" border=1>
      <tr id="idTR">
        <td>First row</td>
      </tr>
    </table>
    <input type="button" onclick="addRow();" value="加一行">
    <br>
    <input type="button" onclick="RemoveRow();" value="减一行">
    <script language="javascript">
    function addRow()
    {
      oTR=idTB.insertRow(idTB.rows.length);
      oTD=oTR.insertCell(0);
      oTD.innerText="New Row " + oTR.rowIndex;
    }
    function RemoveRow()
    {
      oTR=idTB.rows(idTB.rows.length-1);
      oTR.removeNode(true);
    }
    </script>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script>
    var i=0;
    function doAdd()
    {
    i=i+1;
    var nowTable=document.all.myTable;
    var newTr=nowTable.insertRow(i);
    var newTd=newTr.insertCell(0);
    newTd.innerText="tr"+(i+1);
    }
    function doDel()
    {
    if(i>=1)
    {
    document.all.myTable.rows(i).removeNode();
    i=i-1;
    }
    else
    {
    alert("there is no new row!");
    }
    }
    </script>
    </HEAD><BODY>
    <table id="myTable" border="1">
    <tr id="myTr1">
    <td>tr1</td></tr>
    </table>
    <br>
    <input type="button" onclick="doAdd();" value="AddRow">
    <input type="button" onclick="doDel();" value="DelRow">
    </BODY>
    </HTML>
      

  3.   

    <html>
    <head>
    <title>Browser Detection</title>
    <script language="Javascript">
    function del(o)
    {
    while(o.tagName!="TR")
    o = o.parentElement
    document.all.x.deleteRow(o.rowIndex)
    }
    function add(o)
    {
    while(o.tagName!="TR")
    o = o.parentElement
    oTr=document.all.x.insertRow(o.rowIndex)
    oTd  = oTr.insertCell(0)
    oTd .innerHTML=Date.parse(new Date())
    oTd  = oTr.insertCell(1)
    oTd .innerHTML='<input type="button" onclick="del(this)" value=delete>'
    oTd  = oTr.insertCell(2)
    oTd .innerHTML='<input type="button" onclick="add(this)" value=Add>'
    }
    </script>
    </head>
    <body>
    <table id=x border>
    <tr>
    <td>xxxx</td>
    <td><input type="button" onclick="del(this)" value=delete></td>
    <td><input type="button" onclick="add(this)" value=Add></td>
    </tr>
    <tr>
    <td>xxxx</td>
    <td><input type="button" onclick="del(this)" value=delete></td>
    <td><input type="button" onclick="add(this)" value=Add></td>
    </tr>
    </table>
    </body>
    </html>