JavaScript实现点击按钮实现复制标签-Web开发/JavaScript

最新推荐文章于 2022-08-07 14:36:04 发布

cw1112

最新推荐文章于 2022-08-07 14:36:04 发布

阅读量1.8k

点赞数

文章标签：按钮复制标签 javascript

转自：http://biancheng.dnbcw.info/javascript/95601.html

今天遇到个难题：给个table，旁边设置按钮，点击后table中增添和上一行相同的一行，用JavaScript实现。谢谢各位！！

------回答---------

------其他回答（10分）---------

用DOM可以实现，用jquey应该更简单一些。

JScript code

   
   
    
    
<table width="200" border="1" id="test">
  <tr>
    <td>1</td>
    <td>11</td>
    <td>111</td>
  </tr>
  <tr>
    <td>2</td>
    <td>22</td>
    <td>222</td>
  </tr>
  <tr>
    <td>3</td>
    <td>33</td>
    <td>333</td>
  </tr>
</table><input name="" type="button" οnclick="addRow()" value="add row"/>
<script type="text/
    
    javascript">
function addRow(){
 var table=document.getElementById("test");
 var lastTr=table.firstChild.lastChild;
 var cloneNode=lastTr.cloneNode(true);
 table.firstChild.appendChild(cloneNode);
}
</script>

------其他回答（10分）---------

JScript code

   
   
    
    
 <script language="
    
    javascript">
        function addRow(obj) {
            var tr = obj.parentNode.parentNode;
            var tbody = tr.parentNode;
            var newTr = document.createElement("tr");
            newTr.innerHTML = tr.innerHTML;
            tbody.appendChild(newTr);
        }
    </script>
</head>
<body>
    <table class="style1" border="1">
        <tr>
            <td>
                <input id="Text1" type="text" /></td>
            <td>
                <input id="Checkbox1" type="checkbox" /></td>
            <td>
                <select id="Select1" name="D1">
                    <option></option>
                </select></td>
            <td>
                <input id="Button1" type="button" value="添加" onclick = "addRow(this);" /></td>
        </tr>
    </table>
</body>

------其他回答（10分）---------

用这个方法：table.deleteRow(tr.rowIndex)就可以了

------其他回答（10分）---------

引用 4 楼 zhk_0801 的回复:
那再删除最后一行怎么办？？

HTML code

   
   
    
    
<html>
<head>
 <script language="javascript">
        function addRow(obj) {
            var tr = obj.parentNode.parentNode;//获取所在行
            var tbody = tr.parentNode;//获取行的父节点          
            var obj = tr.cloneNode(4);//克隆一个一样的行
         
            tbody.appendChild(obj);
        }
        function removeRow(obj) {
            var tr = obj.parentNode.parentNode; //获取所在行
            var tbody = tr.parentNode; //获取行的父节点         
            tbody.removeChild(tr);//删除制定的行
        }
    </script>
</head>
<body>
    <table class="style1" border="1">
        <tr>
            <td>
                <input id="Text1" type="text" /></td>
            <td>
                <input id="Checkbox1" type="checkbox" /></td>
            <td>
                <select id="Select1" name="D1">
                    <option></option>
                </select></td>
            <td>
                <input id="Button1" type="button" value="添加" onclick = "addRow(this);" />
                <input  type="button" value ="删除" οnclick="removeRow(this);" />
                </td>
        </tr>
    </table>
</body>
</html>