用JavaScript实现对表格元素的添加和删除

最新推荐文章于 2020-04-03 13:59:10 发布
最新推荐文章于 2020-04-03 13:59:10 发布
阅读量244 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42218787/article/details/100053375
版权

用JavaScript实现对表格元素的添加和删除

<style>
        div {
            text-align: center;
        }

        table {
            width: 500px;
            border: 1px solid gray;
            border-collapse: collapse;
            margin: 50px auto;
        }

        thead tr {
            background: #ccc;
        }

        th,
        td {
            line-height: 35px;
            border: 1px solid gray;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <label for="">用户名：</label>
        <input type="text" id="text1" required>
        <label for="">年龄：</label>
        <input type="text" id="text2">
        <button id="but">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>0</td>
                    <td>jack</td>
                    <td>20</td>
                    <td><a href="javascript:void(0)">删除</a></td>
                </tr>
            </tbody>
        </table>
        <script>
        //通过ID确认元素
            var oBut = document.getElementById('but');
            var oText1 = document.getElementById('text1');
            var oText2 = document.getElementById('text2');
            var oTb = document.getElementById('tb');
            var j = 0;
            //添加所需的元素
            oBut.onclick = function () {
                j++;
                //在表格元素tbody中添加元素tr
                var oTr = document.createElement('tr');
                oTb.appendChild(oTr);

				//在元素tr中添加第一个元素tb
                var oTd1 = document.createElement('td');
                oTd1.innerHTML = j;
                oTr.appendChild(oTd1);

				//在元素tr中添加第二个元素tb
                var oTd2 = document.createElement('td');
                oTd2.innerHTML = oText1.value;
                oTr.appendChild(oTd2);

				//在元素tr中添加第三个元素tb
                var oTd3 = document.createElement('td');
                oTd3.innerHTML = oText2.value;
                oTr.appendChild(oTd3);

				//在元素tr中添加第四个元素tb
                var oTd4 = document.createElement('td');
                oTr.appendChild(oTd4);
                oTd4.innerHTML = '<a href="javascript:void(0)">删除</a>';

                var len = document.links.length;
                console.log(len);
                for (var i = 0; i < len; i++) {
                    document.links[i].onclick = function () {

                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    }
                }
            }
            document.links[0].onclick = function () {

                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            }
        </script>
    </div>

添加效果
在这里插入图片描述
删除效果：
在这里插入图片描述

weixin_42218787
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现表格添加删除等操作
03-26
静态实现javascript，实现表格的增加和删除等功能，值得初学者学习
使用JavaScript进行表格的添加和删除以及编辑
阿臻
10-12 1267
菜鸡前端的第四篇博客,感觉还算不上博客。 请叫我菜鸡,也算是每天对自己的一个总结吧 效果如下: 今天写的是一个表格,实现点击按钮能够添加和删除以及改变相关内容 <script> var users = [{ username: "张三", sex: "男", age: 26, }, ...
javascript数组元素的增加与删除
左直拳的马桶_日用桶
04-25 592
一、数组添加元素（至末端） push(元素)var arr = []; arr.push(100); arr.push(99); arr.push(101); alert(arr);//100,99,101二、弹出末端元素 pop()var arr = []; arr.push(100); arr.push(99); arr.push(101); alert(arr);//100,99,101
Javascript邮箱增删
wangbo910927的博客
09-07 277
无标题文档 table { border:#003 1px solid; width:70%; } table td, table th { border:#900 1px solid; } table th { background:#090 } .one { background:#3F0 } .two { background:#C96 } .over
JavaScript中table表格的删除例子
MixedSignals的博客
03-29 187
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...
jQuery实现用户信息表格的添加和删除功能
10-19
在本文中，我们将深入探讨如何使用jQuery来实现用户信息表格的添加和删除功能。这个功能在许多Web应用程序中都很常见，特别是在数据管理或用户管理的界面中。通过使用jQuery，我们可以简化JavaScript代码，使得交互...
基于JavaScript实现动态添加删除表格的行
10-22
本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
DIV添加和删除表格
qq_30347133的博客
02-14 348
最近在项目中做的一个表格的操作(DIV添加和删除表格)感觉还蛮好用的，与大家分享下 新增客户资料 function addAddress(){//调用添加的方法 addentityss(“divadd”); } function addPerson(){//用户输入添加的个数 var id = document.getElementById(“numId”).value; if (id =...
一篇案例让你了解js如何操作表格元素(表格中添加内容行)
JackieDYH的博客
04-02 785
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //用户输入内容后点击添加，...
JavaScript--动态添加元素（纯js书写table并删除数据）
01-09 1671
本文是对上一篇博文的扩展，用js书写表格，并添加和删除数据，详细代码解释见代码页。 对于文中使用的script脚本函数，下载地址如下：https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ 页面效果如图： 代码如下： 1 <!DOCTYPE html> 2 <html> 3 ...
js操作表格元素的添加删除实现
JackieDYH的博客
04-03 1380
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #form { width: 480px; margin: 30px auto; ...
JS 表格节点操作
烂笔头NI
08-13 1612
JS 表格节点操作实现的功能： 在表格中实现添加商品，删除商品和修改商品。实现效果如图所示： 实现代码：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function add_shop(){//添加商品
JavaScript操作Table:添加、修改、删除Table元素
系统运维
08-08 337
方法一：DOM实现 //先获取该表格的引用: var Container = document.getElementById(TableId); //然后创建行(TR对象) var NewTr = document.createElement("tr"); //填充该表格行 var NewTd1 = document.createElement("td"); var NewT...
用js给table表格添加或删除其中的数据（包括新添加的属性）
dididi_didi的博客
09-22 1295
首先，我们得到一个如下的表格，有几个功能需要我们用js去完成 为了从简，就设置了个简单的内联样式 <table border="1" cellpadding="10" cellspacing="0" id="my_table"> <tr> <th>姓名</th> <th>性别</th>...
javascript完成表格的添加和删除功能
god_mycode的博客
07-21 554
new document window.onload = function(){ Highlight(); } function addOne(obj){ var tbody = document.getElementById(‘table’).lastChild; //获取的是tbody
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值