jq中创建表格及删除事件

来源：互联网发布：贪吃蛇java小游戏代码编辑：程序博客网时间：2024/06/07 09:06

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>创建表及删除</title>
  <style type="text/css">
     table{
     width: 400px;
        text-align: center;

     }
  </style>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
   $(function(){
    //点击事件后
    $("#tj").click(function(){
     //获取输入框
     var name=$("#name").val();
     var age=$("#age").val();
     var bir=$("#bir").val();
     //在创建新的一行
     var mtr=$("<tr></tr>");
     var mtd1=$("<td></td>").html(name);
     var mtd2=$("<td></td>").html(age);
     var mtd3=$("<td></td>").html(bir);
     var mtd4=$("<td><button>删除</button></td>");
     //将每一列添加到这一行
     mtr.append(mtd1);
     mtr.append(mtd2);
     mtr.append(mtd3);
     mtr.append(mtd4);
     //将这一行添加到表中
     $("table").append(mtr);
     //点击删除按钮时，找到tr删除
     $("td button").click(function(){
      $(this).parent().parent().remove();
     })


    });





   })
  </script>


</head>
<body>
     姓名:<input type="text" id="name" />
     年龄:<input type="text" id="age" />
     生日:<input type="text" id="bir" />
     <button id="tj">添加</button>
  <table border="1px">
     <tr>
     <td>姓名</td>
     <td>年龄</td>
     <td>生日</td>
     <td>操作</td>
     </tr>
  </table>




</body>
</html>

阅读全文

0 0