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

本文介绍了如何利用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

java_才怪

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

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

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

打赏作者

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

抵扣说明:

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

余额充值