实现2个表格的增删

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title></title> 
</head> 
<script> 
function addRow(obj) 
{ 
//添加一行 
var newTr = testTbl.insertRow(); 
//添加两列 
var newTd0 = newTr.insertCell(); 
var newTd1 = newTr.insertCell(); 
//设置列内容和属性 
newTd0.innerHTML = '&nbsp;'; 
newTd1.innerText= '新加行'; 
} function delRow(obj)
{
var newTr = testTbl.deleteRow();//var newTd0 = newTr.moveCell(); 
//var newTd1 = newTr.moveCell(); 
}
</script> 
<body> 
<table id="testTbl" border=1> 
<tr id="tr1"> 
  <td >&nbsp;</td>
  <td id="b">第一行</td> 
</tr> 
<tr id="tr2"> 
  <td >&nbsp;</td>
  <td id="b">第二行</td> 
</tr> 
<tr id="tr3"> 
  <td >&nbsp;</td>
  <td>第三行</td> 
</tr> 
</table> 
<br /> 
<input type="button" id="add" onclick="addRow();" value="增加" /> 
<input type="button" name="button" id="button" value="删除" onClick="delRow();">
</body> 
</html>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <style>
      td{
    border:1 solid black;
      }
      </style>
      <script language="JavaScript">
      <!-- function add(){
       var otbl1 = document.getElementById("otbl1");
    var otbl2 = document.getElementById("otbl2");
    var orow = otbl1.insertRow();
    var orow2 = otbl2.insertRow();
    var otbl = orow.insertCell();
    var otbl1 = orow.insertCell(); var otbl2 = orow2.insertCell();
    var otbl121 = orow2.insertCell();
     
    otbl.innerHTML = "insert";
    otbl1.innerHTML = "insert1";
    otbl2.innerHTML = "insert";
    otbl121.innerHTML = "insert1"; } function del(){
    var otbl1 = document.getElementById("otbl1");
    var otbl2 = document.getElementById("otbl2");
    if(otbl1.rows.length >0){
    otbl1.deleteRow();
    otbl2.deleteRow();
    }else{
    alert("fail")
    }
    }
      //-->
      </script>
     </head> <body>
      <table id="otbl1" style="width:200px;height:100px;border:1 solid blue;border-collapse:collapse">
      <tr>
    <td>1</td>
    <td>1</td>
      </tr>
      <tr>
    <td>2</td>
    <td>2</td>
      </tr>
      </table>
        <table id="otbl2" style="width:200px;height:100px;border:1 solid red;border-collapse:collapse">
      <tr>
    <td>3</td>
    <td>3</td>
      </tr>
      <tr>
    <td>4</td>
    <td>4</td>
      </tr>
      </table>
      <input type="button" onclick="add()" value="追加">
      <input type="button" onclick="del()" value="删除">
     </body>
    </html>
      

  2.   

    楼上的很简洁，修改一下删除最后一行给出提示。  
     function del(){
            var otbl1 = document.getElementById("otbl1");
            var otbl2 = document.getElementById("otbl2");
            if(otbl1.rows.length >0){
                if ( otbl1.rows.length == 1 ) alert("最后一行");            otbl1.deleteRow();
                otbl2.deleteRow();
                }
        }
      

  3.   


    <input type='button' name='b1' value='增加行' onclick='javascript:addrow();'>
    <br>
    <TABLE id='table1' WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    </TABLE>
    <br>
    <TABLE  id='table2' WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
    </TABLE>
    <SCRIPT LANGUAGE=javascript>
    <!--
    var rownum=0;
    function addrow(){
      var o=null;
      for (var i=1;i<3;i++){
        o=document.getElementById("table"+i)
        insertrow(o);
      }
      rownum++ ;
    }
    function insertrow(obj){ 
      newRow=obj.insertRow(obj.rows.length); 
      newRow.id=obj.name; 
      newRow.ln=rownum; 
      newRow.bgColor="#e0e0e0"; 
      var o=newRow.insertCell(0); 
      o.innerHTML="第"+(rownum*1+1)+"行第1列";   
      o=newRow.insertCell(1); 
      o.innerHTML="第"+(rownum*1+1)+"行第2列";   
      o=newRow.insertCell(2); 
      o.innerHTML="<nobr><font color='#FF0000'><div id='delrow"+(rownum*1+1)+"' ln='"+(rownum*1+1)+"' onclick='return delobj(this.ln);' style='cursor:pointer;'>删</div></font>";
      
    } function delobj(index){ 
      if (rownum==1){alert("只剩下一行了,还要删除?");return false;}
      var o=null;
      for (var i=1;i<3;i++){realdel(index,document.getElementById("table"+i));}
      rownum-- ;
    }function realdel(index,obj){
      if (index!=null){
        if (confirm("真的要删除第"+index+"行吗？")){
          obj.deleteRow(index-1) ;
          //循环重新排列span的ln属性
          for (z=1;z<rownum+1;z++){
    if (z>index){
      e=document.getElementById("delrow"+z)
      e.ln=z-1;
      e.id="delrow"+e.ln
    }
          }
        } 
      }
    }
    </script>