Вопрос по jquery, html – Как вы добавляете строки в таблицу, используя jQuery?

51

Привет я пытался добавить строку в таблицу, используя 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>
увидеть:stackoverflow.com/a/50365764/7186739 Super Model

Ваш Ответ

7   ответов
3

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

<script type="text/javascript">
$('a').click(function() {
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
хорошо, вы делаете что-то еще не так, пожалуйста, проверьте здесь (secretgeek.net/rtjqe/realtimejqueryeditor.htm) ваш собственный код с моим решением или доминирующим решением, вы увидите, что работает. rsilva4
Я пытался выше, но не работал .. :( Amit
9

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

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

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: Вот полный исходный код, и он действительно работает: (Обратите внимание на$(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>
Не забудьте включить «tbody», как показано в исходном примере. Ricardo Rivaldo
по моему опыту вы не можете изменить содержание HTML таблицы. Попробуйте использовать document.createElement ("tr") и document.appendElement () mrwayne
Я изменил ваш источник так, чтобы он работал правильно. (Обратите внимание на редактирование выше) Я не заметил этого раньше, но у вас не было$(document).ready() в том числе, что в принципе все ломает. Если вы не ждетеready() Событие сработало, DOM не загружен и ваш селектор jQuery, вероятно, не найдет то, что ищет. Dominic Barnes
23

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

<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> если не существует

и следующее тоже может быть использовано var value1 = 1; $ ('# myTable'). append ('<tr> <td>' + value1 + '</ td> </ tr>') Amit
8

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

$('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(''));
это можно сделать в ванильных Js? PirateApp
2

Пытаться:

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

И вpartial, у тебя должно быть:

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

Похожие вопросы