• JavaScript学习（六）——表格的动态添加与删除

    JavaScript学习（六）——表格的动态添加与删除

    基本页面

    首先是去创建一个基本页面，上面有一个表格来展示信息

    在这里插入图片描述

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

<table id="table">
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
        <th>操作th>
    tr>

    <tr>
        <td>1td>
        <td>张三td>
        <td>男td>
        <td><a href="javascript:void(0);" >删除a> td>
    tr>
    <tr>
        <td>2td>
        <td>李四td>
        <td>男td>
        <td><a href="javascript:void(0);" >删除a> td>
    tr>
    <tr>
        <td>3td>
        <td>王五td>
        <td>男td>
        <td><a href="javascript:void(0);" >删除a> td>
    tr>

table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    动态删除

    步骤：

    1. 首先点击删除，将会从table中删除点击的链接所在的tr
    2. 获取table节点
    3. 获取tr节点
    4. table节点删除tr节点

    为a标签设置一个点击事件，a标签的父节点是td，td的父节点是tr，tr的父节点是table，所以函数将a标签传入，通过parentNode可以获取父节点

    <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>

    • 1

    定义删除函数

    function del_tr(obj) {
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    点击删除，可以删除表格的信息

    在这里插入图片描述

    动态添加

    接下来实现如何动态添加信息

    步骤

    1. 添加按钮增加点击事件
    2. 获取需要添加的属性
    3. 分别创建属性的td标签
    4. 在td标签中添加需要展示的属性，操作的td标签中要添加a标签
    5. 创建tr标签，把所有的td标签添加进来
    6. 往table标签中添加tr标签

    首先给添加按钮增加点击事件,在add方法中添加之后的所有操作

    var button = document.getElementById("btn_add");
button.setAttribute("onclick","add()");
function add(){

}

    • 1
    • 2
    • 3
    • 4
    • 5

    从输入框中获取到需要添加的属性

    var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;

    • 1
    • 2
    • 3

    将属性转换为节点，这样才能添加到DOM树中，创建td节点，td节点中添加展示的属性，其余两个td节点是一样的操作

    var id_td = document.createElement("td");
var id_text = document.createTextNode(id);
id_td.appendChild(id_text);

    • 1
    • 2
    • 3

    第四列不仅仅是文字，还有一个a标签

    var a_td = document.createElement("td");
var a = document.createElement("a");
var a_text = document.createTextNode("删除");
a.appendChild(a_text);
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("onclick", "del_tr(this)");
a_td.appendChild(a);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    创建tr节点，在tr节点中添加之前创建的所有td节点

    var tr = document.createElement("tr");
tr.appendChild(id_td);
tr.appendChild(name_td);
tr.appendChild(sex_td);
tr.appendChild(a_td);

    • 1
    • 2
    • 3
    • 4
    • 5

    最后在table节点下添加tr节点

    document.getElementById("table").append(tr);

    • 1

    点击添加按钮，添加成功

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

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

<table id="table">
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
        <th>操作th>
    tr>

    <tr>
        <td>1td>
        <td>张三td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>
    <tr>
        <td>2td>
        <td>李四td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>
    <tr>
        <td>3td>
        <td>王五td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>

table>

<script>
    function del_tr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

    var button = document.getElementById("btn_add");
    button.setAttribute("onclick","add()");

    function add() {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;

        var id_td = document.createElement("td");
        var id_text = document.createTextNode(id);
        id_td.appendChild(id_text);

        var name_td = document.createElement("td");
        var name_text = document.createTextNode(name);
        name_td.appendChild(name_text);

        var sex_td = document.createElement("td");
        var sex_text = document.createTextNode(sex);
        sex_td.appendChild(sex_text);

        var a_td = document.createElement("td");
        var a = document.createElement("a");
        var a_text = document.createTextNode("删除");
        a.appendChild(a_text);
        a.setAttribute("href", "javascript:void(0);");
        a.setAttribute("onclick", "del_tr(this)");
        a_td.appendChild(a);


        var tr = document.createElement("tr");
        tr.appendChild(id_td);
        tr.appendChild(name_td);
        tr.appendChild(sex_td);
        tr.appendChild(a_td);

        document.getElementById("table").append(tr);

    }
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94

    也可以之间在table的innerHTML后面直接添加想要添加的标签

    table.innerHTML+="" +id+
    "" + name +
    "" + sex+
    "" + "删除" +
    "";

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

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

<table id="table">
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
        <th>操作th>
    tr>

    <tr>
        <td>1td>
        <td>张三td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>
    <tr>
        <td>2td>
        <td>李四td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>
    <tr>
        <td>3td>
        <td>王五td>
        <td>男td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除a> td>
    tr>

table>

<script>
    function del_tr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

    var button = document.getElementById("btn_add");
    button.setAttribute("onclick","add()");

    function add() {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;

        var table = document.getElementById("table");
        table.innerHTML+="" +id+
            "" + name +
            "" + sex+
            "" + "删除" +
            "";

    }
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
  • 相关阅读:
    本地缓存、Redis数据缓存策略
    HLS基础issue
    Vue中动态绑定属性
    一次 Java log4j2 漏洞导致的生产问题
    计算机毕业设计 高校普法系统的设计与实现 Java实战项目 附源码+文档+视频讲解
    2022.9.5-9.11 AI行业周刊（第114期）：分享的快乐
    SpringBoot2运维实用篇（三）—— 多环境开发
    [生活][杂项] 上班党的注意事项
    一招解决Oracle锁表（有图详解）
    写给正在互联网经历孤独和迷茫的你
  • 原文地址：https://blog.csdn.net/qq_41505957/article/details/126150676