点击增加或删除按钮,怎么使表格自动增加一行和删除一行???求各位大侠帮忙

HTML代码只改了一处，有下划线的地方，
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
   <table width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td>
      <table id='TB' width="100%" border="1" cellspacing="1" cellpadding="0">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      </table>
      </td>
      <td>
      <table width="100" border="1" cellspacing="1" cellpadding="0">
         <tr><td>操作</td></tr>
         <tr><td><input type="button" name="delLine" value="删除一行" onclick="delline()"></td></tr>
         <tr><td><input type="button" name="addLine" value="增加一行" onclick="addline()"></td><tr>
      </table>
         </td>
      </tr>
      </table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addline(){
   var newRow = TB.insertRow();
   var newCell;
   for(var i=0; i<5; i++) {
      newCell = newRow.insertCell(i);
      newCell.innerText = "Add";
   }
}
function delline() {
   TB.deleteRow();
}
//-->
</SCRIPT>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <TITLE>真正意义上的动态插入表格</TITLE>
    <META NAME="Generator" CONTENT="Microsoft FrontPage 4.0">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <TABLE width=400 id="mytable" border=1>
      <TR>
        <TD width="121">
          <input type="checkbox" name="chk" value="">
          <input type="text" name="txt_0" size="8">
        </TD>
        <TD width="84">
          <input type="text" name="txt_1" size="8">
        </TD>
        <TD width="83">
          <input type="text" name="txt_2" size="8">
        </TD>
        <TD width="84">
          <input type="text" name="txt_3" size="8">
        </TD>
      </TR>
    </TABLE>
    <input type="button" value="插入下行" onClick="add_tr(1)" name="button">
    <input type="button" value="插入上行" onClick="add_tr(0)" name="button">
    <input type="button" value="删除行" onClick="del_tr()" name="button2">
    <input type="button" name="move" value="上移" onclick="move_txt(-1)">
    <input type="button" name="move2" value="下移" onClick="move_txt(1)">
    </BODY>
    </HTML>
    <SCRIPT LANGUAGE="vbScript">
    <!--
    function get_chk(i,mc)
    '检查所要检查的长度是多少，如果为1，则直接检查；如果大于1，则循环引用索引检查
    '这个是一个特殊的方式，不知道为什么。
    '返回值是停止的数值i,如果选中，则返回值为空
    set my_chk=document.all(mc)
    get_chk=""
    '如果只有一行，则用直选，如有选中，则返回值为0
    if i=0 then
    if my_chk.checked then
    get_chk=0
    end if
    else
    for j=0 to i
    if my_chk(j).checked then
    get_chk=j
    exit for
    end if
    next
    end if
    end function
    function move_txt(a)
    '移动行时，如果移动到－1的位置，则其实是跑到最后面一行，但如果移动到最后一行再下移则出错
    set my_tab=document.all("mytable")
    set my_chk=document.all("chk")
    b=get_chk(my_tab.rows.length-1,"chk")
    if b<>"" and b<>"0" then
    if (b+a)<=(my_tab.rows.length-1) then
    my_tab.moverow b,b+a
    if (b+a)>=0 then
    my_chk(b+a).checked=true
    else
    my_chk(my_chk.length-1).checked=true
    end if
    else
    my_tab.moverow b,0
    my_chk(0).checked=true
    end if
    else
    if b="0" and my_tab.rows.length>1 then
    if a="1" then
    my_tab.moverow b,1
    my_chk(1).checked=true
    else
    my_tab.moverow 0,my_tab.rows.length-1
    my_chk(my_tab.rows.length-1).checked=true
    end if
    end if
    end if
    end function
    function add_tr(a)
    set my_tab=document.all("mytable")
    set my_chk=document.all("chk")
    tab_rows=my_tab.rows.length                '现有行数
    tab_cells=my_tab.cells.length              '现有列数
    b=get_chk(my_tab.rows.length-1,"chk")
    '如果有被选中的行，则根据传递来的参数判断是在行前插入或在行后插入；如果没有选中，则自然插入
    if b<>"" then
    '如果选中的是第一行而又是向上插入的话，那么，先在该行之后插入一行，再将两者调换
    if b="0" and a="0" then
    set new_row=my_tab.insertrow(1)
    sf_move="1"
    else
    set new_row=my_tab.insertRow(b+a)     '插入一行
    end if
    else
    set new_row=my_tab.insertRow(tab_rows)
    end if
    '在新插入的行中再循环插入列，并赋值
    for i=0 to my_tab.rows(0).cells.length-1
    Set new_cell=new_row.insertcell()
    if i=0 then
    new_cell.InnerHtml="<input type=checkbox name=chk>"&chr(13)&"<input type='text' name=txt_0 size='8'>"
    else
    new_cell.InnerHtml="<input type='text' name=txt_"&i&" size='8'>"
    end if
    next
    if sf_move="1" then
    my_tab.moverow 1,0
    if my_tab.rows.length<=2 then
    my_chk.checked=true
    else
    my_chk(1).checked=true
    end if
    end if
    end function
    '检测某行的所有输入框是否有值
    function txt_null(s,i)
    '如果传递来的选择框行数只有1行，则直接选；否则用索引方式
    txt_null=false
    if s="0" then
    for j=0 to 3
    if document.all("txt_"&j).value<>"" then
    txt_null=true
    exit for
    end if
    next
    else
    for j=0 to 3
    if document.all("txt_"&j)(i).value<>"" then
    txt_null=true
    exit for
    end if
    next
    end if
    end function
    function del_tr()
    set my_chk=document.all("chk")
    set my_tab=document.all("mytable")
    if my_tab.rows.length>1 then
    for i=my_chk.length-1 to 0 step -1      '倒着删除
    if my_chk(i).checked then           '检测该行中的输入框内有没有值，有则退出循环并将变量赋值为1
    if txt_null(my_chk.length-1,i)=true then     '如果该行有值
    if msgbox("第"&i+1&"行中的输入框内有值，确认删除吗？",1,"")=1 then
    my_tab.deleterow(i)
    else
    my_chk(i).checked=false
    end if
    else
    my_tab.deleterow(i)
    end if
    end if
    next
    end if
    end function
    //-->
    </SCRIPT>
      

  2.   

    http://expert.csdn.net/Expert/topic/2269/2269135.xml?temp=.531521
      

  3.   

    <html>
    <script>
    function add()
    { var i=0;
    var t = document.getElementById("table1");
    var count=0;//t.rows.length+1;
    t.insertRow().insertCell().innerHTML="<input type=text name=gwname" + count + ">";
    t.insertRow().insertCell().innerHTML="<input type=text name=gwduty" + count + ">";
      i++
    }
    function del(){
    var i=0;
    var ee=document.getElementById(String("gwname"+i));
    var aa=document.getElementById(String("gwduty"+i));
    ee.removeNode(true);
    aa.removeNode(true);
    }
    </script>
    <table id="table1">
        <input type=button value="增加岗位" onclick=add()>
            <input type=button value="删除岗位" onclick=del()>
    </table>
    </html>
      

  4.   

    http://expert.csdn.net/Expert/TopicView1.asp?id=2422443