用JavaScript实现动态表格

最新推荐文章于 2024-10-01 19:00:00 发布
最新推荐文章于 2024-10-01 19:00:00 发布
阅读量1.3k 收藏 6
点赞数 4
分类专栏： 前端 文章标签： javascript html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45736175/article/details/108163424
版权
本文介绍了如何使用JavaScript实现动态表格的添加和删除功能。通过监听事件、创建和删除DOM节点，实现了表格行的动态增删。添加功能涉及创建td、tr节点并添加到table中，删除功能则利用事件处理和 parentNode 属性移除tr节点。此外，还提到了使用innerHTML简化追加内容的方法。
摘要由CSDN通过智能技术生成

先来看一下效果

先捋一下思路：

要想实现动态效果，那就得使用增删节点的知识。

A.先来搞定添加的功能。

1.给添加按钮添加事件

2.获取输入框的内容,如var id = document.getElementById("id").value;

3.创建td、文本节点，这里有三个元素，id name 和gender 。

如：createElement("td")  createTextNode(id) 注意在使用文本节点时，直接传参数就行，不要写成string格式。

4.把文本节点添加为td的子节点，appendChild()

5.创建tr节点，并把上面三个td节点，添加为tr的子节点

6.获取table，并调用appendChild()把tr作为子节点。

B.再搞定删除的功能，删除也就是移除子节点，移除一行，也就是去掉tr节点

首先要先了解，标签a的作用

1.可以被点击：样式
2.点击后跳转到href指定的url

如果我们直接用href=""，那么执行完删除操作时，页面就会自动跳转到原先的页面，在浏览器显示上就等于没删除。这时就的使用href="javascript:void(0);"，让href不执行任何操作。

1.给所有超链接添加 href="javascript:void(0);" 属性

2.给所有超链接添加 事件 οnclick="方法名(this)";  参数要传递this关键字

3.创建一个方法，执行摘除tr节点。这时就得获取table节点和tr节点，利用this就可以获取指定的删除标签所在的那一行tr。利用parentNode属性获取父节点。

4.这时添加功能也需要有删除连接，所以就在上面的第5步里面，创建2个节点，td和标签a，还有一个文本节点，用来存储"删除"文本。并把文本节点作为标签a的子节点，再把标签a作为td的子节点。

 

<!DOCTYPE html>
<html lang&#
最低0.47元/天 解锁文章
功不唐捐（春小喜）
关注
专栏目录
JavaScript实现动态生成表格
12-28
本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行：<input type=text id=row /> 列： <input type=text id=col /> <input type=button name=go id=go value=go onclick=add() /> </body> js代码部
JavaScript实现动态表格
an_gentle_killer的博客
06-18 157
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> .bigDiv{ width: 600px; margin: 50px auto; } table{ .
使用JavaScript实现动态表格
最新发布
BANaanaa的博客
10-01 1013
通过以上步骤，我们可以使用JavaScript实现动态表格的功能。这不仅可以帮助我们快速构建交互式网页，还可以提高用户体验和数据展示效果。在实现过程中，需要注意数据验证、样式设置、排序、数据绑定和过滤搜索等方面的问题，以确保表格的可靠性和易用性。同时，也可以根据实际需求进行扩展和优化，以实现更加复杂的功能。
Javascript实现动态表格
01-06 495
效果如下： "text/javascript">     function AddTR(){        //取得新增行数的ID值        var idval = document.getElementById("idval").value;        var table = document.getElementById("mytable");  //取得表格对
Js动态操作表格
weixin_30617561的博客
09-25 82
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>装备</title> <meta http-equiv="...
javascript 动态表格
yangpanwww的博客
09-29 122
function build_row(){ var table = document.getElementById("Table1"); var rowTitle = table.insertRow(); var cell1 = rowTitle.insertCell(); cell1.innerHTML = "&amp;nbsp;&...
JavaScript实现动态增删表格的方法
10-20
本文将介绍使用JavaScript实现动态增删表格的方法。动态表格意味着可以在页面加载后，通过用户的操作来增减表格中的行。这种方法在数据展示、数据管理页面中非常实用。 首先，我们使用HTML来构建表格的基本结构，并...
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
javascript动态创建表格
03-11
javascript动态创建表格,适合HTML语言初学者使用，亲测可用
table.js动态操作表格
04-09
用于动态操作表格~~~~~~~~~~~~~~~~~~~~~~·
JavaScript之简单的动态表格
大哥的阔落
12-01 748
JavaScript动态表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500
JavaScript创建动态表格
walking_dead_k的博客
12-02 876
创建动态表格 利用JavaScript，根据数据信息创建动态表格 <script> //1.准备学生数据 var datas = [{ name: '夏弥', subject: 'JavaScript', score: 59 }, { name: '路明非', subject: 'JavaScript' }
JavaScript创建一个动态表格
m0_46660770的博客
03-22 996
目标 建立一个有表头的表格；表格内容可以自行删减。 Html <table> <thead> <tr> <th>name</th> <th>subject</th> <th>grades</th> <th>delat
JavaScript 动态操作表格
Ivan Zhang's 弹丸之地
11-02 655
                    "javascript">            function createTable(){                var tbody=document.createElement("TBODY");//创建表格主体                 roleTable.appendChild(tbody);//加入
使用纯JavaScript实现动态表格创建与数据过滤
在本作业中，需要使用JavaScript对DOM进行操作，以便动态创建表格，并且实现数据的动态展示。具体包括但不限于以下几个方面： - **创建元素**：使用`document.createElement`方法创建新的HTML元素。 - **设置属性**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值