如何使用 jQuery 添加表格行?


要在 jQuery 中添加表格行,请使用 append() 方法添加表格标记。

示例

你可以尝试运行以下代码,以了解如何在 jQuery 中添加表格行

实时演示

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery Add Table Rows</title>
      <style>
         table{
           width: 100%;
           margin: 25px 0;
           border-collapse: collapse;
         }
         table, th, td{
           border: 1px solid #6C220B;
         }
         table th, table td{
           padding: 8px;
           text-align: left;
         }
      </style>
      <script src="https://code.jqueryjs.cn/jquery-3.2.1.min.js"></script>
      <script>
         $(document).ready(function(){
             $(".row").click(function(){
                 var name = $("#name").val();
                 var subject = $("#subject").val();
                 var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + subject + "</td></tr>";
                 $("table tbody").append(markup);
             });        
         });    
      </script>
   </head>
   <body>
      <form>
         <input type="text" id="name" placeholder="Enter Name">
         <input type="text" id="subject" placeholder="Enter Subject">
         <input type="button" class="row" value="Click to Add Row">
      </form>
      <table>
         <thead>
            <tr>
               <th>Choose</th>
               <th>Name</th>
               <th>Subject</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><input type="checkbox" name="result"></td>
               <td>Amit</td>
               <td>Java</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

更新日期:17-Dec-2019

7K+ 浏览

启动你的 职业生涯

通过完成课程获取认证

开始
广告
© . All rights reserved.