jQuery 动态添加表格

本是古典 何须时尚 2023-10-06 22:14 180阅读 0赞

阅读目录

  • 预览
  • 源码

预览

在这里插入图片描述

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title</title>
  7. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8. <script>
  9.     $(function () {
  12.         //提交按钮事件
  13.         $("#submit").click(function () {
  15.             var tr = $("<tr>");
  16.             tr.append($("<td>").html($("#name").val()));
  17.             tr.append($("<td>").html($("#email").val()));
  18.             tr.append($("<td>").html($("#salary").val()));
  20.             btn_del = $("<input type=button value='Delete'/>   ");
  22.             btn_del.click(function () {
  24.                 $(this).parent().remove();
  25.             })
  27.             tr.append(btn_del);
  28.             $("#table").append(tr);
  30.         })
  32.     })
  33. </script>
  34. </head>
  36. <body>
  38. <div id="div1" align="center">
  39.     <label style="vertical-align: middle">添加新员工</label><br>
  40.     name:<input type="text" id="name">
  41.     email:<input type="text" id="email">
  42.     salary:<input type="text" id="salary"><br>
  43.     <input type="button" value="submit" id="submit" align="center">
  44.     <hr>
  45.     <table border="1" width="800px" id="table">
  46.         <tr>
  47.             <th>Name</th>
  48.             <th>Email</th>
  49.             <th>Salary</th>
  50.             <th>Option</th>
  51.         </tr>
  52.     </table>
  53. </div>
  55. </body>
  56. </html>

发表评论

表情：
评论列表 （有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读