利用js动态的向table等元素添加数据

最新推荐文章于 2023-10-11 17:30:01 发布
最新推荐文章于 2023-10-11 17:30:01 发布
阅读量3.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： HTML5 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zxlvzz/article/details/84584350
本文演示了如何使用JavaScript在HTML表格中动态添加数据。通过创建新的行和单元格，并将用户输入的数据插入到表格中，实现了数据的动态展示。同时，文章还展示了删除表格行的功能，增强了交互性。

<!DOCTYPE html>//页面元素
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/cs.css" />
    </head>
    <body>
        <div id="top">
        <p align="center">添加员工</p>
        Name<input type="text" id="name" />
        Email<input type="text" id="email" />
        Salary<input type="text" id="salary" />
        <p></p>
        <input type="submit" value="添加" id="bt" name="bt" onclick="insert()" />
        <p>-------------------------------------------------------</p>
        </div>
        <table id="tab" border="2" cellpadding="1" cellspacing="0">
            <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Salary</th>
            </tr>
            <tr>
                <td>Tmo</td>
                <td>Tmo@163.com</td>
                <td>5000</td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerry@163.com</td>
                <td>6000</td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>bob</td>
                <td>bob@163.com</td>
                <td>7000</td>
                <td><a href="#">Delete</a></td>
            </tr>
        </table>
    </body>
</html>

<script>

    window.onload = function(){
            function delTr(aNode){
                var tr =  aNode.parentNode.parentNode;
                var nameStr = tr.getElementsByTagName("td")[0].firstChild.nodeValue;
                var flag = confirm("s"+nameStr);
                if(flag){
                    tr.parentNode.removeChild(tr);
                }
            }
            var table = document.getElementById("tab");
            var aNodes = table.getElementsByTagName("a");
            for(var i = 0;i<aNodes.length;i++){
                aNodes[i].onclick = function(){
                    delTr(this);
                }
            }
            document.getElementById("bt").onclick = function(){
                       
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var salary = document.getElementById("salary").value;
            var de = document.createElement("a");
            var tr = document.createElement("tr");
            
            var tname = document.createElement("td");
            var temail = document.createElement("td");
            var tsalary = document.createElement("td");
            var tde = document.createElement("td");
            
            tr.appendChild(tname);
            tr.appendChild(temail);
            tr.appendChild(tsalary);
            tr.appendChild(tde);
            
            var textname = document.createTextNode(name);
            var textemai = document.createTextNode(email);
            var textsalary = document.createTextNode(salary);
            var textdel = document.createTextNode("Delete");
            
            tname.appendChild(textname);
            temail.appendChild(textemai);
            tsalary.appendChild(textsalary);
            de.appendChild(textdel);
            tde.appendChild(de);
            
            document.getElementById("tab").appendChild(tr);
            de.onclick = function(){
                delTr(this);
            }
            
            }
        }

</script>

js将table的每个td的内容自动赋值给其title属性的方法
10-21
下面小编就为大家带来一篇js将table的每个td的内容自动赋值给其title属性的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用js为table添加行
weixin_34082854的博客
04-17 238
前几天在项目中，用到了一些前端的小技巧，一个是我现在要写的，还有一个就是三个select的联动。我写这篇博客的目的是：1.供自己以后随时查阅用 2.希望对他人也有所帮助，因为总有还不会的。 这个话题虽然网上也有人写过。但我争取把这篇博客写的更详细些。 先来个效果图：我最终想实现的就是当点击添加时，table当前最后一行下面添加新的一行。 ...
JS向表格里添加数据
qq_45968325的博客
05-18 7807
题目： 1） 定义一个Student对象， 该对象有sname、age、sex、nickname、hobby几个属性 2） 构建数据，将班里所有学生的信息创建成对应的Student对象， 并将这些Student对象存储到数组中 3） 在页面定义一个table标签，并将表头（th）写好。 4） 在表格下方添加一个添加按钮，并给按钮添加一个点击事件。 每点击一次按钮，就通过JS动态添加一行学生信息到表格的尾部。 如果全部添加完成，提示用户“添加完成” 5） 在表格下方添加一个移除按钮，并给按钮添加一个点击事件
JavaScript动态向表格添加数据
书写人生
04-12 5556
利用javascript ，动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th...
向已有的table中插入数据
weixin_30776545的博客
08-20 423
table： <table id="seleted-table" class="table table-bordered table-hover" style="display: table"> <thead> <tr> <th width="50%">#&lt...
bootstrapTable实现表格内数据的添加、删除、修改、查询
最新发布
09-11
添加数据是通过一个表单来实现的，开发者可以定义一个表单元素，并通过BootstrapTable提供的事件监听机制来捕捉表单提交事件。在事件处理函数中，将表单数据以对象或键值对的形式添加到表格数据数组中，并调用...
JS获取动态添加元素的方法详解
12-01
在模板中直接为元素添加事件监听器是一种直接的方法。例如，使用`art-template`模板引擎，可以在按钮元素上添加`onclick`事件： ```html <script id="tpl-table" type="text/html"> {{ each rows value key }} ...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
table动态添加行并编辑
09-12
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
利用js动态添加删除table行的示例代码
10-26
在这篇文章中，作者介绍了使用JavaScript (js) 来动态添加和删除HTML表格（table）中的行的技术。通过提供示例代码，文章向读者展示了如何在网页中创建具有交互性的表格，使用户可以通过点击按钮的方式增加或移除...
JS动态创建Table,Tr,Td并赋值的具体实现
12-01
成果库修改：      要求主题列表随成果类型改变而改变      网上查询资料后开工，在成果类型下拉框添加change()事件触发Dwr，查询主题集合——动态创建/编辑Table      概要代码如下：JS  代码如下://动态获取主题数据 function getzts(){     parentId = document.getElementById(“bselect1”).value;     if(parentId!=””){         dwrMethod.getZtList(parentId,callback5);     }else{         //清空主题Tabl
JS动态向表格添加数据
Lakeson
11-21 1588
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;可动态删除的表格&lt;/title&gt; &lt;/head&gt; &amp
js动态生成html表格,JS动态添加table表格元素
weixin_42122988的博客
06-10 282
// Last updated 2006-02-21function addRowToTable(){var tbl = document.getElementById('tblSample');var lastRow = tbl.rows.length;// if there's no header row in the t...
js动态写入table中的数据
私は悪い人ですか的博客
07-18 1926
按照这个系统写的一个小的web程序，前端额页面极其的丑陋，只是简单的把动态写入table保存一下，话不多说上代码 $.ajax({ type: "post", ansyv: false, data: { "findName...
使用js实现一个可以添加数据的表格，并且带有删除功能
chenximuxueya的博客
10-11 1930
点击生成，并清除input框中的内容。这样基本功能就完成了。
js将后端返回的数据动态添加到table中
qq_38687751的博客
10-29 9265
为了解决最近遇到的将后端数据inforesult（数组）动态添加到table中的问题 触类旁通，把后端判断去掉就可以本地测试（自己建一个数组，已正确加载，测试通过） 先建立一个table 加载页面时调用函数 window.onload = function(){ ClassifyContents(); } js如下function ClassifyContents()
js给table赋值
热门推荐
听海Movie的专栏
05-26 1万+
要求：用js实现给一个table赋值如上：（定义X=70） 【HTML】 经济条件较好地区学费表
php 的值给tabletd,js将table的每个td的内容自动赋值给其title属性的方法
weixin_42418754的博客
03-24 506
如下所示：将table的每个td的内容自动赋值给其title属性.tbStyle td{border:1px solid #F00}.tbStyle th{border:1px solid #F00}$(function(){//table的最后一列不给其title赋值var cellIndex=parseInt($(".tbStyle th").length)-1;$(".tbStyle tr ...
JavaScript动态操作HTML元素：添加与删除实例
接着，`AddSignRow`函数演示了如何动态添加HTML元素，这里是向表格（table）中插入新行（tr）。函数首先通过`findObj`获取名为"txtTRLastIndex"的文本框，该文本框用于存储当前表格的最后一行的行号。然后，它将这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值