首页 > 代码库 > 实现表格的增加，删除，复制，克隆

实现表格的增加，删除，复制，克隆

2024-10-09 02:28:02   214人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作表格</title>
    <script>
        function append() {
            var thirdtr=document.getElementById(‘thirdtr‘);
            var parents=thirdtr.parentNode;
            //创建一个tr
            var newtr=document.createElement(‘tr‘);
            var newtd1=document.createElement(‘td‘);
            newtd1.innerHTML="当幸福来敲门";
            var newtd2=document.createElement(‘td‘);
            newtd2.innerHTML=30;
            newtr.appendChild(newtd1);
            newtr.appendChild(newtd2);
            parents.insertBefore(newtr,thirdtr);
        }
        function dlnode(){
            var sencondtr=document.getElementById(‘sencondtr‘);
            var parents=sencondtr.parentNode;
            parents.removeChild(sencondtr);
        }
        function changesty() {
            var firsttr=document.getElementById(‘firsttr‘);
            var firststy=firsttr.setAttribute(‘style‘,‘font:16px;background:#ccc‘);
        }
        function clonnode() {
            var thirdtr=document.getElementById(‘thirdtr‘);
            var parents=thirdtr.parentNode;
//            var newtr=document.createElement(‘tr‘)
//            var newtd1=document.createElement(‘td‘)
//            newtd1.innerHTML="幸福来敲门";
//            var newtd2=document.createElement(‘td‘);
//            newtd2.innerHTML="20";
            var cl=thirdtr.cloneNode(true);
            parents.appendChild(cl);
        }
    </script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr id="firsttr">
        <td>书名</td>
        <td>价格</td>
    </tr>
    <tr id="sencondtr">
        <td>看得见的风景</td>
        <td>20</td>
    </tr>
    <tr id="thirdtr">
        <td>幸福来敲门</td>
        <td>30</td>
    </tr>
</table>
<input type="button" value="增加一行" id="appennode" onclick="append()">
<input type="button" value="删除第二行" id="dlnode" onclick="dlnode()">
<input type="button" value="修改标题样式" id="changesty" onclick="changesty()">
<input type="button" value="复制最后一行" id="copynode" onclick="clonnode()">
</body>
</html>

 

实现表格的增加，删除，复制，克隆


联系
我们