JS动态表格_javascript:wcnm.moon.value="sss";-CSDN博客

本文链接：https://blog.csdn.net/wcnmqmzn/article/details/107474612

第一步

创建文本框与按钮

效果图
在这里插入图片描述

<div>
    <input type="text" id="id" value="" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>

第二步

创建表格
添加初始数据

<table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>    //连接到del函数
        </tr>
        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
    </table>

效果图
在这里插入图片描述

第三步

JS代码

获取用户输入的值

//添加按钮的函数
document.getElementById("btn_add").onclick=function ()
{
var id=document.getElementById("id").value;
//通过id获取id=“id”的编辑框的值
var name=document.getElementById("name").value;
//通过id获取id=“name”的编辑框的值
var gender=document.getElementById("gender").value;

把获取的值便问文本节点对象

var text_id=document.createTextNode(id);//把编号变成文本节点对象
var text_name=document.createTextNode(name);
var text_gender=document.createTextNode(gender);

创建列标签

var td_id=document.createElement("td");
var td_name=document.createElement("td");
var td_gender=document.createElement("td");
var td_c=document.createElement("td");

把文本节点作为子类添加到列标签上

td_id.appendChild(text_id);
td_name.appendChild(text_name);
td_gender.appendChild(text_gender);
td_c.innerHTML="<a href='javascript:void(0)' οnclick='del(this)''>删除</a>";
//第四列连接有del函数

创建并将td标签添加到tr上

 var tr=document.createElement("tr");
 tr.appendChild(td_id);
 tr.appendChild(td_name);
 tr.appendChild(td_gender);
 tr.appendChild(td_c);

获取table标签并添加tr标签

 var table=document.getElementById("table");
 table.appendChild(tr);

del函数

 var
 function del(e) {
 //通过超链接a节点对象获取 父元素的父元素。。。tr和table
 var table=e.parentNode.parentNode.parentNode;
 var tr=e.parentNode.parentNode;
 table.removeChild(tr);
}

运行效果

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

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

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" value="" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>
    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
    </table>
</body>
<script>
    /*1.获取用户输入的编号值*/
    document.getElementById("btn_add").onclick=function () 
    {
        var id=document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        
        
        console.log(id);
        var text_id=document.createTextNode(id);//把编号变成文本节点对象
        var text_name=document.createTextNode(name);
        var text_gender=document.createTextNode(gender);
        

        var td_id=document.createElement("td");
        var td_name=document.createElement("td");
        var td_gender=document.createElement("td");
        var td_c=document.createElement("td");

        td_id.appendChild(text_id);
        td_name.appendChild(text_name);
        td_gender.appendChild(text_gender);
        td_c.innerHTML="<a href='javascript:void(0)' οnclick='del(this)''>删除</a>";
        
        var tr=document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_c);
        var table=document.getElementById("table");
        table.appendChild(tr);
    }


    /*2.删除  父节点对象.removeChild(子节点对象);
	   a标签的href属性：如果是空字符串：表示跳转到当前页面。功能就是刷新当前页面
	*/
    function del(e) {
        //通过超链接a节点对象获取 父元素的父元素。。。tr和table
        var table=e.parentNode.parentNode.parentNode;
        var tr=e.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</html>