js实现复制，删除一行div或一行table

来源：互联网发布：goagent php 编辑：程序博客网时间：2024/05/29 15:52

转：http://hi.baidu.com/lmydream0417/blog/item/1d7523393f1b3628b8998fd2.html

2010-05-26 15:28

在网上看到一段通过对节点的控制增加或删除一行table的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//给table增加一行
function addTableRow() {
    var table1 = document.getElementById('table1');
    var cloneTab = document.getElementById('table2');
    //alert(cloneTab.firstChild.firstChild.innerHTML);
    //alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
    table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));

    var v= table1.firstChild.childNodes;
    var len = v.length;
    for(var i=1;i<len;i++){
        v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值
    }
}

//给table删除一行
function delTableRow(){
    var table1 = document.getElementById('table1');
    var isChecked = document.getElementsByName('isChecked');
    var len = isChecked.length;
    for(var i=len-1;i>=0;i--){
        if(isChecked[i].checked==true){
             table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
            //alert(isChecked[i].id);
            //alert(isChecked[i].parentNode.parentNode.innerHTML);
        }
    }
}
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" class="datalist" id="table1">
    <tr>
      <th width="38" nowrap="nowrap" style="width: 5%">0</th>
      <th width="38" nowrap="nowrap" >00</th>
      <th width="79" nowrap="nowrap" scope="col">1</th>
      <th width="70" nowrap="nowrap" scope="col">2</th>
      <th width="69" nowrap="nowrap" scope="col">3</th>
      <th width="66" nowrap="nowrap" scope="col">4</th>
      <th width="94" nowrap="nowrap" scope="col">5</th>
      <th width="107" nowrap="nowrap" scope="col">6</th>
    </tr>
</table>


<table>
      <tr align="center">
        <td colspan="10">
          <input type="button" value="增加" onclick= "addTableRow();"/>
          <input type="button" value="删除" onclick="delTableRow();"/>
        </td>
     </tr>
</table>


<table id='table2' style="display: none">
<tr>
    <th><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th>
    <th width="38" nowrap="nowrap" style="width: 5%"><input type="text" size="16" maxlength="50" value=""/></th>
    <th width="79" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
    <th width="70" nowrap="nowrap" scope="col"><input type="text" size="6" maxlength="10" value=""/></th>
    <th width="69" nowrap="nowrap" scope="col">
          <select size="1">
              <option value="">请选择...</option>
              <option value="1">1</option>
              <option value="2">1</option>
         </select>
        </th>
    <td width="100" nowrap="nowrap" scope="col"><input type="text" class="date150"/></td>
    <th width="94" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
    <th width="71" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
</tr>
</table>

</body>
</html>

因为我用的是div+css，所以将上面的代码改成如下：

.box_quantity_li1{ float:left;
      width:60px;
      margin:8px 0px 0px 0px;
      padding:0px;
      text-align:center;

}
.box_quantity_li2{ float:left;
      width:30px;
      margin:8px 0px 0px 0px;
      padding:0px;
      text-align:center;

}
.txt1{width:55px;
   background:#fef0e5;
   border:1px solid #7a4e25;
   height:15px;
   font-size:12px;
   color:#7a4e25;

}
.selecsty1{ width:50px;
   background:#fef0e5;
   border:1px solid #7a4e25;
   height:15px;
   font-size:12px;
   color:#7a4e25;

}
.singlesty{background:#fef0e5;

   color:#7a4e25;
}
.close{clear:both;}
.box_quantity_button {
border:1px solid #7a4e25;
width:47px;
height:17px;
background:#fefdfb;
color:#7a4e25;
cursor:pointer;
}
</style>
<script type="text/javascript">
//给table增加一行
function addTableRow() {
    var table1 = document.getElementById('table1');
    var cloneTab = document.getElementById('table2');
    alert(cloneTab.firstChild.firstChild.innerHTML);
    alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
/* table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));   */
table1.firstChild.appendChild(cloneTab.firstChild.cloneNode(true));
    var v= table1.firstChild.childNodes;
    var len = v.length;
    for(var i=1;i<len;i++){
        v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值
    }
}

//给table删除一行
function delTableRow(){
    var table1 = document.getElementById('table1');
    var isChecked = document.getElementsByName('isChecked');
    var len = isChecked.length;
    for(var i=len-1;i>=0;i--){
        if(isChecked[i].checked==true){
             table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
            //alert(isChecked[i].id);
            //alert(isChecked[i].parentNode.parentNode.innerHTML);
        }
    }
}
</script>

</head>

</div>
<div style="display:none;" id="table2">
<ul class="box_quantity_ul" >
    <li class="box_quantity_li2">
    <input type="checkbox" name="isChecked" />
    </li>
    <li class="box_quantity_li1">
    <select class="selecsty1">
    <option>呵呵</option>
    <option>哈哈</option>
    <option>啦啦</option>


    </select></li>
    <li class="box_quantity_li1">
    <select class="selecsty1">
    <option>1</option>
    <option>2</option>
    <option>3</option>


    </select>


    </li>
    <li class="box_quantity_li1"><input type="text" class="txt1" /></li>
    <li class="box_quantity_li2"><input type="checkbox" /></li>

    <div class="close"></div>
</ul>
</div>

</body>
</html>