jQuery实现动态添加tr到table的方法

最新推荐文章于 2023-09-21 18:58:06 发布
最新推荐文章于 2023-09-21 18:58:06 发布
阅读量5.3k 收藏 1
点赞数
分类专栏： java 文章标签： jQuery实现动态添加tr到table的方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java_12138/article/details/82841838
版权
本文介绍了如何利用jQuery实现表格动态添加tr行的功能，详细讲解了相关语法和步骤，为前端开发人员提供实用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

  </head>

  <body>

    <center>

      <br><br>

      添加用户:<br><br>

      姓名: <input type="text" name="name" id="name" />

      email: <input type="text" name="email" id="email" />

      电话: <input type="text" name="tel" id="tel" /><br><br>

      <button id="addUser">提交</button>

      <br><br>

      <hr>

      <br><br>

      <table id="usertable" border="1" cellpadding="5" cellspacing=0>

        <tbody>

          <tr>

            <th>姓名</th>

            <th>email</th>

            <th>电话</th>

            <th> </th>

          </tr>

          <tr>

            <td>Tom</td>

            <td>tom@tom.com</td>

            <td>5000</td>

            <td><a href="deleteEmp?id=Tom">Delete</a></td>

          </tr>

          <tr>

            <td>Jerry</td>

            <td>jerry@sohu.com</td>

            <td>8000</td>

            <td><a href="deleteEmp?id=Jerry">Delete</a></td>

          </tr>

        </tbody>

      </table>

    </center>

  </body>

  <script>

    $(document).ready(function(){

      $("#addUser").click(function(){

        var name = $("#name").val();

        var email = $("#email").val();

        var tel = $("#tel").val();

        var $tr = $("<tr>"+

        "<td>"+name+"</td>"+

        "<td>"+email+"</td>"+

        "<td>"+tel+"</td>"+

        "<td><a href='deleteEmp?id="+name+"'>删除</a></td>"

        +"</tr>");

        var $table = $("#usertable");

        $table.append($tr);

        $tr.children().children().click(function(){

          //alert($(domEle).parent().parent().children(":first").text());

            //方法1.

//           $(domEle).parent().parent().remove();

//           return false;

            //方法2.

            return deleteTr($tr);

        });

        //不能在这里 给每个<a> 加事件 ，每add一次就each一次，会重复弹出confirm

//       $("tr td a").each(function(index,domEle){

//         $(domEle).click(function(){

//           //alert($(domEle).parent().parent().children(":first").text());

//           //方法1.

            $(domEle).parent().parent().remove();

            return false;

//           //方法2.

//           return deleteTr($(domEle).parent().parent());

//         });

//

//       });

      });

      function deleteTr(aObject) {

        var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名称的值吗？");

//      alert(flag);

         if(!flag){

          return false;

         } else {

          aObject.remove();

          return false;

         }

        return false;

      }

    })

  </script>

</html>

jQuery 控制和显示TR
02-28 244
jQuery 控制和显示TR 第一种方法，就是使用id，这个方法可以在生成html的时候动态设置tr的id，也是用得最多最简单的一种，如下： Html代码 <table> <tr><td>这行不隐藏</td></tr> <trid="tr_1"><td&gt...
jQuery实现动态层操作：添加、拖动与移除
最新发布
weixin_32661831的博客
03-18 962
动态添加层是Web开发中的一项技术，允许开发者在用户与页面交互的过程中，根据特定的触发事件，将新的HTML元素添加到现有的DOM结构中。这些新添加的元素可作为覆盖层、弹出窗口、对话框或任何其他需要临时出现的组件。移除层指的是从DOM中删除页面上特定的元素或元素集合。与动态添加层相反，移除层的操作通常用于清理不再使用的组件或内容，以及响应用户的某些操作。例如，一个模态对话框的关闭按钮可能会触发一个移除层的操作，移除模态框本身以及它可能包含的内容。
html中table追加tr,jQuery实现动态添加tr到table的方法
weixin_42512936的博客
05-31 429
本文实例讲述了jQuery实现动态添加tr到table的方法。分享给大家供大家参考，具体如下：运行效果图如下：完整代码如下：/p>"http://www.w3.org/TR/html4/strict.dtd">添加用户添加用户:姓名: email: 电话: 提交姓名email电话 Tomtom@tom.com5000DeleteJerryjerry@sohu.com8000Delete...
Jquery之动态操作table
broccoli2的博客
08-07 686
首先创建test.html文件，内容如下： 这里用的jQuery版本是jquery-1.8.2.js,点击下载jquery-1.8.2.js<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text
JQuery操作动态操作Table
ykp的专栏
06-30 493
tableId为table的id 保留第一行，删除其它所有的行：$(“#tableId tr”).empty();保留第一行，删除其它所有的行：$(“#tableId tr:not(:first)”).empty();
jQuery实现为table表格动态添加或删除tr功能示例
01-19
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考，具体如下： HTML页面元素如下： <!-- 订单明细dialog --> 销售订单明细 xss=removed> <table class=exhibit_table id=...
jQuery+ajax实现动态添加表格tr td功能示例
12-11
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现动态添加表格的`<tr>`和`<td>`功能。这个功能通常用于网页上的数据展示，特别是在用户交互时需要实时更新表格内容的情况，例如筛选、搜索或加载更多数据。 ...
jQuery实现动态给table赋值的方法示例
12-29
本文实例讲述了jQuery实现动态给table赋值的方法。分享给大家供大家参考，具体如下： html 请忽视各种class，因为前端用的是layui <table class=layui-table lay-skin=line id=datas> <tr> 昵称 ...
JQuery 实现动态操作 table 行
贼賊大宝
11-22 504
JQuery 实现动态操作 table 行 实现效果：可动态实现table添加行和删除行，如下图。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html动态Table</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min
JQuery动态添加表格tr td
热门推荐
jqdfTiTan的博客
09-27 1万+
功能：ajax获取后台返回数据给table动态添加tr/td html： ajax：var year = $('#year').val();//下拉框数据 var province= $('#province').val();//下拉框数据 $('table tbody').html(''); $.ajax({ url:"/Plan/sendJson.html",
JQuery 动态生成DIV、Table并处理数据
03-29
NULL 博文链接：https://lk617238688.iteye.com/blog/763608
jQuery动态新增tr示例
小瓜的博客
06-06 893
       下面的例子使用jQuery动态在table中新增tr,删除tr，具体请看代码。代码如下：         &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jquery 动态新增tr&lt;/title&gt; &lt;st
【开发小记】之 jQuery查询，动态添加table表格并进行分页处理
weixin_45438028的博客
07-21 807
采用jQuery进行处理，动态添加表格数据，并按默认一页10条进行分页展示，支持上一页、下一页，首页，尾页，具体页面跳转！
jQuery动态处理table
A_treeman的博客
07-29 453
工作中有时候会写一些小工具，web端主要用html、css、jQuery来写的。因为vue呀nodejs呀不会~下面就记录下我用到的一些操作。首先描述下后端返回的数据格式{keys1:{key1:value1-1，key2:value1-2...},keys2:{key1:value2-1,key2:value2-2....}},其中key值是相同的,所要实现的效果类似于这样,然后对比某一列的值是...
jQuery在table中动态添加一行tr
love_huaner的博客
06-27 1万+
先在页面写一个隐藏的 然后当触发某一按钮时在响应事件中 clone()（克隆一个隐藏的），然后将克隆得到对象.show()显示出来再去掉对象的id或class（避免下次克隆 不是之前那个隐藏的）然后向对象中添加相应的数据，最后append(对象)将对象添加进表格。  js代码： var lastRow = $("#hidden").clone(true);    lastRow.show(
滚动条滚动异步加载数据
风一样的男子
05-23 1407
&lt;script type="text/javascript"&gt;       //获取列表中的原有内容      var content=document.getElementById("img").innerHTML;      function addLi(){       var userid = document.getElementById("use").value;   ...
使用jQuery添加Table行元素的编程
CyberFlare的博客
09-21 141
jQuery是一种受欢迎的JavaScript库，提供了简洁而强大的方法来操作HTML元素。在本文中，我们将使用jQuery来添加Table的行元素。在上面的代码中，我们首先创建了一个带有两列的Table，并在其中添加了两行数据。然后，我们创建了一个按钮，用于触发添加行的操作。通过这种方式，每当按钮被点击时，就会向Table中添加一行新的数据。最后，我们将新行添加到Table的tbody部分，使用。在点击事件的处理程序中，我们首先创建了一个新的行元素，使用。然后，我们创建了两个新的单元格元素，并使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

java_才怪

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

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

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

打赏作者

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

抵扣说明：

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

余额充值