Как добавить строку в таблицу через jquery?
2 ответа
от
dmitrypro77 ,
3 года назад
@hoyt.jerde Чтобы добавить новую строку в таблицу через jQuery Вы можете использовать метод .append() посмотрите пример кода ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <meta charset="utf-8"/> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <style> table, td { border: 1px solid black; } </style> </head> <body> <table id="table"> <thead> <tr> <td>Id</td> <td>Имя</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Василий</td> </tr> </tbody> </table> <button class="add-row">Добавить строку</button> </body> <script> $(".add-row").on("click", function () { $("#table tbody").append($('<tr>') .append($('<td>') .text('2') ) .append($('<td>') .text('Рома') ) ) }); </script> </html> |
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
jaren ,
2 года назад
@hoyt.jerde
Вы можете добавить строку в таблицу с помощью следующего кода jQuery:
HTML код таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table id="myTable"> <thead> <tr> <th>Имя</th> <th>Возраст</th> <th>Страна</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>USA</td> </tr> <tr> <td>Jane</td> <td>25</td> <td>Canada</td> </tr> </tbody> </table> |
JavaScript код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function() { // Выберите таблицу var table = $('#myTable').find('tbody'); // Создайте новую строку var row = $('<tr>'); // Добавьте ячейки в строку var nameCell = $('<td>').text('Bill'); var ageCell = $('<td>').text('35'); var countryCell = $('<td>').text('UK'); row.append(nameCell); row.append(ageCell); row.append(countryCell); // Добавьте строку в таблицу table.append(row); }); |
Этот код выберет таблицу по ее ID ("myTable"), создаст новую строку и добавит в нее ячейки с данными, а затем добавит эту строку в таблицу. Вы можете изменить текст в ячейках, чтобы отображать нужную информацию.
15