Как добавить строки в таблицу с помощью jQuery?

Привет я пытался добавить строку в таблицу с помощью jQuery, но это не работает.
В чем может быть причина?

И, могу ли я добавить какую-то ценность недавно добавленной строке?

Вот код:

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

Ответы

Ответ 1

Я предполагаю, что вы хотите добавить эту строку в элемент <tbody>, и просто используя append() в <table>, вставьте <tr> вне <tbody>, возможно, с нежелательными результатами.

$('a').click(function() {
   $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});

EDIT: Вот полный исходный код, и он действительно работает: (Обратите внимание на $(document).ready(function(){});, которого раньше не было.

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

Ответ 2

Следующий код работает

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

Примечание это будет работать с jQuery 1.4, даже если таблица содержит элемент <tbody>:

jQuery, так как версия 1.4 (?) автоматически определяет, будет ли элемент, который вы пытаетесь вставить (используя любые методы append(), prepend(), before() или after()), является <tr> и вставляет он в первый <tbody> в вашей таблице или переносит его в новый <tbody>, если он не существует.

Ответ 3

Возможно, это тот ответ, который вы ищете. Он находит последний экземпляр <tr /> и добавляет новую строку после него:

<script type="text/javascript">
    $('a').click(function() {
        $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
    });
</script>

Ответ 4

Я всегда использую этот код ниже для более удобочитаемого

$('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(''));

или если у него есть 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(''));

Ответ 5

Вы должны добавить в таблицу, а не строки.

<script type="text/javascript">
$('a').click(function() {
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>

Ответ 6

Try:

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

И в partial вы должны иметь:

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

Ответ 7

Проверено и работает

Добавить в качестве первой строки в таблице

$(".table tbody").append("<tr><td>New row</td></tr>");

Добавить как последнюю строку в таблице

$(".table tbody").prepend("<tr><td>New row</td></tr>");