(up有分）如何用JavaScript实现表格的自动计算和自动增删行？

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function addRow() {
myTable.outerHTML=myTable.outerHTML.replace(/<\/table>/i,(myTable.rows[myTable.rows.length-1].outerHTML)+"</table>");
myTable.rows[myTable.rows.length-1].cells[0].innerText++;
}
function chkRowNum(){
var e=window.event.srcElement
var i=e.parentElement.cellIndex,r=e.parentElement.parentElement.rowIndex; 
if(r==myTable.rows.length-1){addRow();myTable.rows[myTable.rows.length-2].cells[i].children[0].select();}
}
</SCRIPT></head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<table width="98%" border="1" cellspacing="0" cellpadding="0" bordercolor="#ffcc00" align="center" id="myTable">
<th>字段1<th>字段2<th>字段3<th>字段4</th>
<tr>
<td>1
<td><input type=text name=r1c1 size=20 onfocus="chkRowNum()">
<td><input type=text name=r1c2 size=20>
<td><input type=text name=r1c3 size=30>
</tr>
</table>
<input type=button onclick="addRow()" value=新增>
</form>
</body>
</html>

解决方案 »

  1.   

    To fason(阿信) :
    admire...还有删除和自动计算怎么做呢？
    认真学习中
      

  2.   

    看看这个
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>表格增删</title>
    </head>
    <body>
    <script>
    ///////////////////////
    ///by fason(2003-5-5)//
    ///////////////////////
    function addrow(){
    var r=t.insertRow()
    for(i=0;i<t.rows[0].cells.length;i++)r.insertCell().innerHTML='&nbsp;'
    r.cells[0].innerHTML=Number(t.rows[t.rows.length-2].cells[0].innerHTML)+1
    r.cells[i-1].innerHTML="<input type=checkbox name=c>"
    }
    function delrow(){
    var ch=document.getElementsByName("c")
    for(i=ch.length-1;i>=0;i--)if(ch[i].checked)t.deleteRow(ch[i].parentElement.parentElement.rowIndex)
    }
    </script>
    <table border="1" width="300" id=t>
    <thead>
      <tr>
        <th width=120>字段1</th>
        <th width=120>字段2</th>
        <th>删除</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>100</td>
        <td>test</td>
        <td><input type=checkbox name=c></td>
      </tr>
    </tbody>
    </table>
    <input type=button value="add" onclick="addrow()"><input type=button value="del" onclick="delrow()">
    </body>
    </html>
      

  3.   

    To fason(阿信) :如果不要前面的CheckBox，默认删除表格最后一行，应该如何做呢？
    我在第一个程序中加入了如下代码，但是不能删除，请指教，谢谢！function delRow() 
    {
    myTable.deleteRow[myTable.rows.length-1];
    }
      

  4.   

    可以啊，是不是按钮中你写错了？onclick="delRow()"
      

  5.   

    To fason(阿信) :
    我没有写错哟，下面是我的代码：function delRow() {
    myTable.deleteRow[myTable.rows.length-1];
    }<input type=button onclick="delRow()" value=删除>
      

  6.   

    function delRow(){
    t.deleteRow(t.rows.length-1);
    }
      

  7.   

    To fason(阿信) :
    我是用的第一个程序，不是第二个。。
      

  8.   

    试试我的代码，保证能用！！
    <center>
    <font size=4><b>Table Delete And Add Example</b></font>
    <br><hr width=600><br>
    <table id="table1" cellspacing=1 bgcolor=black align=center>
    <tr bgcolor=#ffcc00 name=r0>
    <td><input type=text name=t>
    <td><input text=text name=t>
    <td><input type=checkbox name=c>
    </table>
    <br>
    <input type=button value="add" onclick=add()>
    <input type=button value="delete" onclick=del()>
    <input type=button value="compute" onclick=compute()><script>
    ////////////////////////////////////////////////////
    ///       版权所有:wssgwps(小刀会)     ///////////
    ///////////////////////////////////////////////////
    function add()
    {
        newRow=table1.insertRow(table1.rows.length);
        newRow.bgColor="#ffcc00";
        c0=newRow.insertCell(0);
        c1=newRow.insertCell(1);
        c2=newRow.insertCell(2);
        c0.innerHTML="<input type=text name=t>";
        c1.innerHTML="<input type=text name=t>";
        c2.innerHTML="<input type=checkbox name=c>";
    }
    ////////////////////////////////////////////////////////
    function del()
    {
        var collDelId = document.getElementsByName("c");
        
        for(var i=0;i<table1.rows.length;i++)
        {
    if(collDelId[i].checked)
    {
        table1.deleteRow(i);
        i--;
    }
        }
    }
    ////////////////////////////////////////////////////////
    function compute()
    {
        var sum;
        var collTxt;
        sum = 0;
        collTxt = document.getElementsByName("t");
        
        for(var i=0; i<collTxt.length; i++)
        {    
         if(collTxt[i].value == "")
                 sum += 0;
             else
                 sum += parseInt(collTxt[i].value);
        }
        alert("sum=" + sum);
    }
    </script>
      

  9.   

    To wssgwps(小刀会) :如果不要前面的CheckBox，默认删除表格最后一行，应该如何做呢？
      

  10.   

    干脆把我的代码全部拷出来，大家来帮忙找错误。<html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    function addRow() {
    myTable.outerHTML=myTable.outerHTML.replace(/<\/table>/i,(myTable.rows[myTable.rows.length-1].outerHTML)+"</table>");
    myTable.rows[myTable.rows.length-1].cells[0].innerText++;
    }
    function delRow() {
    myTable.deleteRow[myTable.rows.length-1];
    }
    function chkRowNum(){
    var e=window.event.srcElement
    var i=e.parentElement.cellIndex,r=e.parentElement.parentElement.rowIndex; 
    if(r==myTable.rows.length-1){addRow();myTable.rows[myTable.rows.length-2].cells[i].children[0].select();}
    }
    </SCRIPT></head>
    <body bgcolor="#FFFFFF" text="#000000">
    <form name="form1" method="post" action="">
    <table width="98%" border="1" cellspacing="0" cellpadding="0" bordercolor="#ffcc00" align="center" id="myTable">
    <th>字段1<th>字段2<th>字段3<th>字段4</th>
    <tr>
    <td>1
    <td><input type=text name=r1c1 size=20 onfocus="chkRowNum()">
    <td><input type=text name=r1c2 size=20>
    <td><input type=text name=r1c3 size=30>
    </tr>
    </table>
    <input type=button onclick="addRow()" value=新增>
    <input type=button onclick="delRow()" value=删除>
    </form>
    </body>
    </html>
      

  11.   

    function delRow(){
    myTable.deleteRow(myTable.rows.length-1);
    }
      

  12.   

    To fason(阿信) :
    谢谢！马上结帖。。