How to add table row in jQuery?

jQueryWeb DevelopmentFront End Technology

To add table row in jQuery, use the append() method to add table tags.


You can try to run the following code to learn how to add table row in jQuery:

Live Demo

<!DOCTYPE html>
      <title>jQuery Add Table Rows</title>
           width: 100%;
           margin: 25px 0;
           border-collapse: collapse;
         table, th, td{
           border: 1px solid #6C220B;
         table th, table td{
           padding: 8px;
           text-align: left;
      <script src=""></script>
                 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);
         <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">
               <td><input type="checkbox" name="result"></td>
Updated on 17-Dec-2019 06:47:44