JS-Table动态增加删除行

最新推荐文章于 2024-05-03 11:47:20 发布

菜鸟程序员也有梦想

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量1.2w

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/u013977285/article/details/70237275

版权

HTML
参考资料

http://www.runoob.com/jsref/dom-obj-document.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>姓名<input type="text" id="name" />
        <input type="button" value="添加" onclick="add()" /><br />
        电话<input type="text" id="tel" /></p>
        <p>
            <table border="1px" id="tb">
                <tr>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>action</td>
                </tr>
            </table>
        </p>
    </body>

</html>

JS代码块

<script>
            function add(){
                //获取元素的值
                var name = document.getElementById("name").value;
                var tel = document.getElementById("tel").value;
                //获取table
                var tab = document.getElementById("tb");
//              创建元素
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tab.appendChild(tr);
                td1.innerHTML = name;
                td2.innerHTML = tel;
                td3.innerHTML = "<input type='button' value='删除' onclick='del(this)' />"

            }
            function del(p){
                p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
            }
        </script>

菜鸟程序员也有梦想

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JS-Table动态增加删除行

JS代码块<script> function add(){ //获取元素的值 var name = document.getElementById("name").value; var tel = document.getElementById("tel").value;
复制链接

扫一扫