如何在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.jquery.com/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>