使用js实现一个可以添加数据的表格，并且带有删除功能_js给div里的数据添加表格

作者：Guff_9hys | 2024-07-27 04:35:20

踩

js给div里的数据添加表格

一、HTML部分

一、HTML部分

1、先搭建表头：


<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
</table>

2、加上css样式


table,
    table td,
    table tr {
        border: 1px solid #000000;
        width: 600px;
        height: 50px;
        text-align: center;
        border-collapse: collapse;
 }

效果如下：

3、加上输入框和添加按钮


<input type="text" placeholder="姓名" id="input1">
    <input type="text" placeholder="性别" id="input2">
    <input type="text" placeholder="年龄" id="input3">
    <button>生成</button>
    <div style="height: 20px;"></div>

以及样式


 input {
        width: 100px;
        height: 30px;
    }

二、js部分

1、获取input框的内容


var text1 = document.getElementById('input1').value
            var text2 = document.getElementById('input2').value
            var text3 = document.getElementById('input3').value
            var arr = [text1, text2, text3]

2、创建表头


var tr1 = document.createElement('tr')
            table.appendChild(tr1)

3、把表格加到表头后面


for (let j = 0; j < 3; j++) {
                var td1 = document.createElement('td')
                tr1.appendChild(td1)
                td1.innerHTML = arr[j]
            }

4、创建删除按钮


var td3 = document.createElement('td')
            tr1.appendChild(td3)
            var del = document.createElement('a')
            del.href = "#"
            del.innerHTML = '删除'
            td3.appendChild(del)

5、添加删除功能


del.onclick = remove
            function remove() {
                this.parentNode.parentNode.remove()
            }

6、添加按钮点击事件


btn.onclick = function () {
            cj()
            document.getElementById('input1').value = ''
            document.getElementById('input2').value = ''
            document.getElementById('input3').value = ''
        }

这样基本功能就完成了。

三、演示

点击生成，并清除input框中的内容

删除

四、整体代码


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table,
    table td,
    table tr {
        border: 1px solid #000000;
        width: 600px;
        height: 50px;
        text-align: center;
        border-collapse: collapse;
    }
 
    input {
        width: 100px;
        height: 30px;
    }
</style>
 
<body>
    <input type="text" placeholder="姓名" id="input1">
    <input type="text" placeholder="性别" id="input2">
    <input type="text" placeholder="年龄" id="input3">
    <button>生成</button>
    <div style="height: 20px;"></div>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
 
    <script>
        var table = document.querySelector('table')
        var btn = document.querySelector('button')
 
        function cj() {
 
            //获取input框的内容
            var text1 = document.getElementById('input1').value
            var text2 = document.getElementById('input2').value
            var text3 = document.getElementById('input3').value
            var arr = [text1, text2, text3]
 
            //创建表头
            var tr1 = document.createElement('tr')
            table.appendChild(tr1)
 
            //把表格加到表头后面
            for (let j = 0; j < 3; j++) {
                var td1 = document.createElement('td')
                tr1.appendChild(td1)
                td1.innerHTML = arr[j]
            }
 
            //创建删除按钮
            var td3 = document.createElement('td')
            tr1.appendChild(td3)
            var del = document.createElement('a')
            del.href = "#"
            del.innerHTML = '删除'
            td3.appendChild(del)
 
            //添加删除功能
            del.onclick = remove
            function remove() {
                this.parentNode.parentNode.remove()
            }
 
        }
 
        //按钮点击事件
        btn.onclick = function () {
            cj()
            document.getElementById('input1').value = ''
            document.getElementById('input2').value = ''
            document.getElementById('input3').value = ''
        }
 
 
    </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/888692