How to add rows in HTML Table using Jquery?

Question

I want to add rows dynamically at runtime using Jquery. At beginning table don't have any records. When user click the ADD Button it has to add the rows.

When user click ADD Button the operator dropdown list box value and Filter values should add in that table row.

Here what I tried Jquery CODE

$("#btnAdd").click(function () {

   // $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>");
    $('#queryTable > tbody:last-child').append('<tr>Record1</tr><tr>Record2</tr>');
});

I tried both lines. But it doesn't make any sense. Thanks

HTML Code

 <table class="table table-hover " id="queryTable">
     <thead>
         <tr>
             <th>Field Name</th>
             <th>Values</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>Mark</td>  //Please ignore these two records. At beginning the table will be empty
             <td>Otto</td>
         </tr>
         <tr>
             <td>Jacob</td>
             <td>Thornton</td>
         </tr>
     </tbody>
 </table>

@locateganesh, How does accepting an answer work?

Satpal
– Satpal

2017-02-02 06:33:49 +00:00
Commented Feb 2, 2017 at 6:33 — Satpal
– Satpal, Commented Feb 2, 2017 at 6:33

Kevin Jimenez · Accepted Answer · 2017-02-02 06:27:09Z

8

The correct jQuery code to add HTML elements is:

$('#queryTable tbody').append('<tr><td>Record1</td><td>Record2</td></tr>');

edited Feb 2, 2017 at 6:27

answered Feb 2, 2017 at 6:20

Kevin Jimenez

4462 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2017-02-02 06:24:41Z

Your input string HTML is incorrect. As of now you have no TD element thus content is not displayed. However its appended and exists in DOM

'<tr><td>Record1</td><td>Record2</td></tr>

instead of

'<tr>Record1</tr><tr>Record2</tr>'

$('#queryTable > tbody:last-child').append('<tr><td>Record1</td><td>Record2</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-hover" id="queryTable">
  <thead>
    <tr>
      <th>Field Name</th>
      <th>Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>

pritam · Accepted Answer · 2017-02-02 06:57:25Z

<!DOCTYPE html>
<html>
<head>

<title>Add Rows Dynamically</title>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add").click(function(){
            var name = $("#name").val();
            var lastname = $("#lastname").val();
            var markup = "<tr><td>" + name + "</td><td>" + lastname + "</td></tr>";
            $("table tbody").append(markup);
        });


    });    
</script>
</head>
<body>

        <input type="text" id="name" placeholder="Name">
        <input type="text" id="lastname" placeholder="Last Name">
        <input type="button" class="add" value="Add">

    <table style="border: 1px solid black;">
        <thead>
            <tr>

                <th>Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</body> 
</html>

It may help you.

Collectives™ on Stack Overflow

How to add rows in HTML Table using Jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related