Menu
Hi I was trying to add a row to a table using jQuery, but it is not working.
What might be the reason?
And, can I put in some value to the newly added row..?
Here is the code:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('a').click(function() { $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>'); }); </script> <title></title> </head> <body> <a href="">Link</a> <table id="myTable"> <tbody> <tr> <td> test </td> </tr> </tbody> </table> </body> </html> 
357
append() / prepend() to Add Table Row in jQuery. To add a row in the table body using jQuery, we can use DOM inside insertion methods of append() or prepend() that adds an element to the suggested element's start or end. Here we will select the tbody element of table element with id="test" to add a row after it.
To add a row, define a variable that keeps the count of the total number of that now exists in the table. Then we will use the jQuery “click” event to detect a click on the add row button and then use the . append() method of jQuery to add a row in the table.
The task is to insert a new row in that table at a certain index using JQuery. Approach: Store the table column value <td> element into the variable. Then use eq() and after() method to insert the row in a table.
I'm assuming you want to add this row to the <tbody> element, and simply using append() on the <table> will insert the <tr> outside the <tbody>, with perhaps undesirable results.
$('a').click(function() { $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); }); EDIT: Here is the complete source code, and it does indeed work: (Note the $(document).ready(function(){});, which was not present before.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('a').click(function() { $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); }); }); </script> <title></title> </head> <body> <a href="javascript:void(0);">Link</a> <table id="myTable"> <tbody> <tr> <td>test</td> </tr> </tbody> </table> </body> </html> The following code works
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function AddRow() { $('#myTable').append('<tr><td>test 2</td></tr>') } </script> <title></title> </head> <body> <input type="button" id="btnAdd" onclick="AddRow()"/> <a href="">test</a> <table id="myTable"> <tbody > <tr> <td> test </td> </tr> </tbody> </table> </body> </html> Note this will work as of jQuery 1.4 even if the table includes a <tbody> element:
jQuery since version 1.4(?) automatically detects if the element you are trying to insert (using any of the append(), prepend(), before(), or after() methods) is a
<tr>and inserts it into the first<tbody>in your table or wraps it into a new<tbody>if one doesn't exist.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With