JavaScript实现点击按钮实现复制标签

zhk_0801 2010-04-22 01:50:15

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

...全文

192 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

guansong8079776 2010-04-24

打赏
举报

[Quote=引用 4 楼 zhk_0801 的回复:]

那再删除最后一行怎么办？？
[/Quote]



<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 ="删除" onclick="removeRow(this);" />

                </td>

        </tr>

    </table>



</body>

</html>

licip 2010-04-23

打赏
举报

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

zhk_0801 2010-04-23

打赏
举报

那再删除最后一行怎么办？？

guansong8079776 2010-04-22

打赏
举报



 <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>

doug_wang 2010-04-22

打赏
举报

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



<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" onclick="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>