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

目录

一、HTML部分

        1、先搭建表头：

         2、加上css样式

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

二、js部分

        1、获取input框的内容

         2、创建表头

         3、把表格加到表头后面

        4、创建删除按钮

        5、添加删除功能

        6、添加按钮点击事件

三、演示

四、整体代码

---

一、HTML部分

        1、先搭建表头：

                        

        

            
姓名
            
性别
            
年龄
            
操作
        

         2、加上css样式

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

                效果如下：

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

    
    
    生成
    

                以及样式

 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框中的内容

删除

四、整体代码

    
    
    




    
    
    
    生成
    

    

        

            
姓名
            
性别
            
年龄
            
操作