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

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量3k 收藏 48
点赞数 6
分类专栏： js SpringBoot 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41505957/article/details/126150676
版权
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>1</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" >删除</a> </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td><a href="javascript:void(0);" >删除</a> </td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td><a href="javascript:void(0);" >删除</a> </td>
    </tr>

</table>
动态删除

步骤：

  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>

定义删除函数

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

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

在这里插入图片描述

动态添加

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

步骤

  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(){

}

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

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

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

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

第四列不仅仅是文字，还有一个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);

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

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

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

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

点击添加按钮，添加成功

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>1</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td>3</td>
        <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>

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

table.innerHTML+="<tr><td>" +id+
    "</td><td>" + name +
    "</td><td>" + sex+
    "</td><td>" + "<a href=\"javascript:void(0);\" οnclick=\"del_tr(this)\">删除</a>" +
    "</td></tr>";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>1</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td>3</td>
        <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+="<tr><td>" +id+
            "</td><td>" + name +
            "</td><td>" + sex+
            "</td><td>" + "<a href=\"javascript:void(0);\" οnclick=\"del_tr(this)\">删除</a>" +
            "</td></tr>";

    }
</script>
</body>
</html>
张宜强
关注
  • 6
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
JS动态添加Table的TR，TD实现方法
10-24
主要介绍了JS动态添加Table的TR，TD实现方法,涉及js针对Table中TR、TD节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
使用DOM节点的动态添加和删除向表格中插入删除数据
yinghanhanhan的博客
12-09 866
在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值。在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除。在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件。绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件。点击插入数据按钮，将输入框中的数据插入到表格中。
new关键字来创建c++中一维二维三维的动态数组及其相应的删除方法
nyist_yangguang的博客
01-01 606
一、C++创建一维数组 type *p = new type [N] type是指具体的数据类型， N代表的是一维数组的列数 每次使用new后都要释放 delete[] p1; 二、C++创建二维数组 一般的格式：type (*p)[N] = new type [][N] type是指具体的数据类型， N代表的是二维数组的列数 另一种格式：不需要写列数 当然在每次使用完动态数组后，需要将其释放 #include<iostream> #include<s
JavaScript Dom 案例-动态表格的添加和删除
Ass12454548的博客
01-24 1075
JavaScript Dom 案例-动态表格的添加和删除
17-DOM-案例：动态表格添加删除和表格校验
记录java学习日常~
05-18 263
实现一个动态表格，包含三个输入框和一个添加按钮，用户可以输入编号、姓名、性别添加至表格，每行数据后面都有一个删除按钮可以删除对应行。同时在输入时会进行非空校验，在添加完一行数据后会将输入框清空以便下次输入。
动态数据添加和删除
m0_52484611的博客
01-25 997
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
JavaScript_实现增删改操作（新增、删除、修改）
热门推荐
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
如何在CSDN上删除博客、删除自己上传的资源
网络技术和Python
10-13 4385
一、删除博客 1. 鼠标悬停在右上角“个人头像”上 2. 点击“内容管理”，默认会进入创作中心。（见下图） 3. 点击博客或文档右下角的“···” 4. 点击“删除” 二、删除自己上传的资源 与删除博客类似，只不过在“下载”选项卡中删除即可。（见下图） ...
怎么删除CSDN上发布的文章(电脑版)
qq_56385525的博客
07-25 2290
怎么删除CSDN上发布的文章(电脑版)
javascript动态添加删除表格
宋宋的博客
03-27 422
当页面中的按钮被点击时，创建一个包含4列的表格，并将其添加到具有id属性为“box”的元素中。每行包含一个单元格，分别显示用户输入的id、name和xb值，并且在最后一列包含一个带有“删除”链接的超链接。函数的作用是：从表格中删除包含所点击链接的行。获取链接的祖先元素，然后使用。方法从表格中删除该行。
JS动态增加删除表格行
09-29
JS动态增加删除表格行 有两种方式，一种是增加表格行，另一种是通过增加DIV内的数据实现。
JavaScript详解(第2版)
04-25
第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　...
从入门到精通HTML5——PDF——网盘链接
02-27
　7.1.1　表格的基本构成——table、tr、td 119 　7.1.2　表格的标题——caption 120 　7.1.3　表格的表头——th 121 　7.2　设置表格基本属性 123 　7.2.1　表格的宽度——width 123 　7.2.2　表格的高度——height...
JavaScript高级教程
09-10
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
deflame:提高 WordPress 博客上的讨论质量
06-28
再次单击以删除所有“已忽略”的评论，并在页面顶部添加您（不）同意谁的表格。 这附带了一个指向 defla.me 上托管版本的短链接，因此您可以向其他评论者展示您如何看待对话。为什么： 在线辩论的最大问题是，每...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 437
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1019
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 311
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue 实现级联选择器功能
清音的博客
04-22 539
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
js table 生成序号_jQuery——动态给表格添加序号
05-26
可以使用 jQuery 来给表格添加序号。可以通过以下步骤来实现： 1. 在表格中添加一个新的列，用于显示序号。 2. 使用 jQuery 遍历表格中的每一行，为每一行添加序号。 下面是一个示例代码： ```html 姓名 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张宜强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值