How do you append rows to a table using jQuery?

前端未结

关注

 7  1354

渐次进展

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..?

相关标签:

7条回答

梦毁少年i

2020-12-01 01:41

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>

0 讨论(0)

感情败类

2020-12-01 01:41
Add as first row or last row in a table

To add as first row in table
```
$(".table tbody").append("<tr><td>New row</td></tr>");
```
To add as last row in table
```
$(".table tbody").prepend("<tr><td>New row</td></tr>");
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
慢半拍i

2020-12-01 01:43
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
说谎

2020-12-01 01:45
Maybe this is the answer you are looking for. It finds the last instance of <tr /> and appends the new row after it:
```
<script type="text/javascript">
    $('a').click(function() {
        $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
    });
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

攒了一身酷

2020-12-01 01:48

I always use this code below for more readable

$('table').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

or if it have tbody

$('table').find('tbody').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

0 讨论(0)

无人共我

2020-12-01 01:49

Try:

$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");

And in the partial, you should have:

<td>row1</td>
<td>row2</td>

0 讨论(0)

1 2 下一页