javascript动态添加删除表格

终究是雾散

已于 2023-03-27 16:16:02 修改

阅读量470

点赞数 1

分类专栏： js事件文章标签： html 前端 javascript

于 2023-03-27 15:57:49 首次发布

本文链接：https://blog.csdn.net/SongLiang02_/article/details/129797044

版权

js事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<script>
    var id = document.getElementById('id')
    var names = document.getElementById('name')
    var xb = document.getElementById('xb')
    var tianjia = document.getElementById('tianjia')
    var tab = document.createElement('table')
    tianjia.onclick = function () {
        tab.style.width = "500px"
        tab.style.height = "50px"
        tab.border = 1
        tab.cellpadding = 0
        tab.cellspacing = 0
        box.appendChild(tab)

        var tr = document.createElement('tr')
        var td1 = document.createElement('td')
        var td2 = document.createElement('td')
        var td3 = document.createElement('td')
        var td4 = document.createElement('td')

        td1.innerHTML = id.value;
        td2.innerHTML = names.value;
        td3.innerHTML = xb.value;
        td4.innerHTML = "<a href='#' onclick='del(this)'>删除</a>"

        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tr.style.textAlign = 'center'
        tab.appendChild(tr)
    }
    function del(e) {
        var table = e.parentNode.parentNode.parentNode
        table.removeChild(e.parentNode.parentNode)
    }
</script>

当页面中的按钮被点击时，创建一个包含4列的表格，并将其添加到具有id属性为“box”的元素中。每行包含一个单元格，分别显示用户输入的id、name和xb值，并且在最后一列包含一个带有“删除”链接的超链接。点击该链接将使用del函数删除该行。

del函数的作用是：从表格中删除包含所点击链接的行。在函数中，使用parentNode获取链接的祖先元素，然后使用removeChild方法从表格中删除该行。

<body>
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="xb">
    <input type="button" value="点击" id="tianjia">
    <div id="box">

    </div>
</body>

<style>
    table {
        border: 1px solid;
        margin: auto;
        width: 500px;
    }

    td,
    th {
        text-align: center;
        border: 1px solid;
    }

    div {
        text-align: center;
        margin: 50px;
    }
</style>

终究是雾散

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript动态添加删除表格

当页面中的按钮被点击时，创建一个包含4列的表格，并将其添加到具有id属性为“box”的元素中。每行包含一个单元格，分别显示用户输入的id、name和xb值，并且在最后一列包含一个带有“删除”链接的超链接。函数的作用是：从表格中删除包含所点击链接的行。获取链接的祖先元素，然后使用。方法从表格中删除该行。
复制链接

扫一扫