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

chenximuxueya

已于 2023-11-01 16:54:23 修改

阅读量1.4k

点赞数 3

文章标签： javascript 开发语言 html 前端 css

于 2023-10-11 17:30:01 首次发布

本文链接：https://blog.csdn.net/chenximuxueya/article/details/133774868

版权

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