使用函数和DOM实现表格的增删查

最新推荐文章于 2022-02-10 17:22:49 发布
最新推荐文章于 2022-02-10 17:22:49 发布
阅读量244 收藏 1
点赞数
文章标签： js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44200575/article/details/100052181
版权

使用函数和DOM实现表格的增删查

使用函数和DOM实现表格的增删改查

要求：
（1）创建一个基础表格；
（2）实现在输入框输入数据后点击添加；
（3）对应的表格里便会出现该条数据并且自动生成编码；
（4）点击表格中的删除，该行数据便会被删除，
（5）自动生成的编码在点击删除后一并删除，不会改变。

思路

（1）利用简单的html创建一个基础表格框架；
（2）为节点赋予id名，根据id名查找DOM节点
（3）定义函数创建点击事件
（4）创建tr
（5）创建td
（6）将td放入tr
（7）将td放入tbody
（8）将输入的数据放入表格
（9）自动生成编号 （代码中生成的编号是简单的数字，并未具有具体的含义，如有别的需求需要自行添加）
（10）复制删除节点
（11）利用函数为超链接添加点击事件

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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="txt1">用户名：</label>
        <input type="text" id="txt1" >
        <label for="txt2">年龄：</label>
        <input type="text" id="txt2">
        <button id="btn">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id='oTbody'>
                <tr id='oTr'>
                    <td>0</td>
                    <td>jack</td>
                    <td>20</td>
                    <td id='oTd2'><a href="javascript:void(0)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div >
        <script>
            var txt1 = document.getElementById('txt1');
            var txt2 = document.getElementById('txt2');
            var oTr = document.getElementById('oTr');
            var oTbody = document.getElementById('oTbody');
            
            document.getElementById('btn').onclick = function () {
                
                //创建tr
                var oTr1 = document.createElement('tr');
                //创建td
                var oTd0 = document.createElement('td');
                var oTd = document.createElement('td');
                var oTd1 = document.createElement('td');
                //将td放入tr
                oTr1.appendChild(oTd0);
                oTr1.appendChild(oTd);
                oTr1.appendChild(oTd1);
                //将td放入tbody
                oTbody.appendChild(oTr1);
                //将输入的数据放入表格
                oTd.innerHTML = txt1.value;
                oTd1.innerHTML = txt2.value;
                //为第一个格加编号
                oTd0.innerHTML=document.links.length;
               
                //复制删除节点
                var oTd2 = document.getElementById('oTd2');
                var newA = oTd2.cloneNode(true);
                oTr1.appendChild(newA);
                //为超链接添加点击事件
                var len = document.links.length;
                for (var i = 0; i < len; i++) {
                    document.links[i].onclick = function () {
                        oTbody.removeChild(this.parentNode.parentNode)
                    }
                }
            }
        
</script>
</body >
</html >
東耳哟。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用DOM节点的动态添加和删除向表格中插入删除数据
yinghanhanhan的博客
12-09 913
在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值。在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除。在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件。绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件。点击插入数据按钮，将输入框中的数据插入到表格中。
JavaScript Dom 案例-动态表格的添加和删除
Ass12454548的博客
01-24 1137
JavaScript Dom 案例-动态表格的添加和删除
DOM复习Day3———添加和删除
lass_huahua的博客
08-19 138
今日复习内容：元素的添加和删除 1.添加：可分为3步： ①创建一个空元素：var a =document.createElement("a") 注意：只能用document调用 ②给新元素添加内容或属性 例如： <a href="www.baidu.com"></a> a.innerHTML="click...
JS基础_添加删除记录练习-添加
兴趣是最好的老师
11-22 263
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel...
JavaScript—DOM基础操作应用—列表的创建和删除
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
12-27 275
文本： createElement（标签名）—— 创建节点 父级.insertBefore（子级，子级位置）—— 可应用于倒序插入 父级.appendChild（子级）——应用于尾部插入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
JavaScript 学习笔记（十三）Dom创建表格
12-10
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
一组JS创建和操作表格的函数集合
10-29
在用AJAX的时候，经常要用JS操作DOM，当涉及到数据列表的时候，那用表格比较多，这里写了组函数集合，专门用来操作表格，当然，目前还有很多不足，但是对一些简单操作还是很方便的。
JavaScript DOM 学习第三章 内容表格
01-19
如果你也想这么做，那么你还需要我的getElementByTagNames()函数。 代码如下:function createTOC() { var y = document.createElement(‘div’); y.id = ‘innertoc’; var a = y.appendChild(document....
用javascript 控制表格行的展开和隐藏的代码
10-30
该代码展示了如何使用 JavaScript 来控制表格行的展开和隐藏，并提供了一些有用的知识点，包括 JavaScript 语言基础、DOM 操作、事件监听、CSS 样式、HTML 结构、JavaScript 函数、JavaScript 对象和 Browser 兼容性...
jsdom:与Node一起使用的各种Web标准JavaScript实现-开源
04-15
jsdom是许多Web标准（特别是WHATWG DOM和HTML标准）的纯JavaScript实现，可与Node.js一起使用。 通常，该项目的目标是模拟Web浏览器的子集，从而足以用于测试和抓取实际的Web应用程序。 jsdom的最新版本需要Node.js ...
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
AngularJS实现数据列表的增加、删除和上移下移等功能实例
11-22
效果图 实例代码 &lt;!DOCTYPE html> &lt;html lang="en" ng-app="myapp" ng-controller="myCtrl"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0; list-style: none;font-size:12px;} .clearfix{overflow: hidden;display:block;clear:both} .clearfix:after{zoom:1} .relation{margin-t
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3085
eed
js操作表格数据，DOM实现数据动态增删查改
袁成新（Chauncey Yuan）
12-01 1213
基本功能 demo中涉及到的管理员密码为：962464。当然啦，那是假的，代码里面能找到，随意修改，模拟敏感操作而生 1、增加 点击增加按钮，出现信息输入界面，输入完成后确认添加 2、删除 直接点击“删除”按钮 点击全选，出现“删除已选”按钮，删除已选项 任意点击某一项或多项前的选择框，出现“删除已选”按钮，删除已选项 3、查询 姓名、手机号、性别三者单独查询或者联合查询，模糊查询 4、排序 按学...
JavaScript实现项目列表的增删移动
博客来自passerby&
12-08 4074
JavaScript实现项目列表的增删移动 在前面我们已经学习了html和css，相信大家对此应该有了相当的理解 想要完成此项任务我们需要准备以下知识点： Find()定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 当数组中的元素在测试条件时返回 true 时
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3535
DOM操作：事件、增、删、改查
【DOM】创建动态表格示例
你今天真好看呀
08-31 456
文章目录创建表格的原始方法使用节点对象创建表格 创建表格的原始方法 创建表格的基本方法： <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> table{ ...
国内移动端APP月活跃（MAU）Top5000 数据整理
最新发布
06-16
国内移动端APP月活跃（MAU）Top5000 时间范围：2020年-2022年 具有一定参考价值 csv格式
使用HTML DOM操作表格数据，用HTML DOM的相关方法完成增加一行和删除选中相应复选框的对应行的功能
04-01
addRow()函数可以通过insertRow()和insertCell()方法在表格的末尾添加一行，并在这一行的每个单元格中添加内容。deleteRow()函数可以通过getElementsByTagName()方法获取表格中所有的行，并使用deleteRow()方法删除...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值