Как с помощью javascript или jquery заменить данные таблицы?
2 ответа
от
velma ,
2 года назад
@sylvester
Для замены данных в таблице с помощью JavaScript или jQuery можно использовать следующий подход:
- В HTML разметке создайте таблицу с id или классом, чтобы иметь возможность селектировать её из JavaScript или jQuery. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Name
Age
Country
John
28
USA
Mary
25
Canada
|
- В JavaScript или jQuery найдите таблицу по id или классу и замените данные с помощью методов innerHTML или text(). Например, если необходимо заменить данные в первой строке таблицы:
JavaScript:
1 2 3 |
document.getElementById("myTable").rows[1].cells[0].innerHTML = "Alex"; document.getElementById("myTable").rows[1].cells[1].innerHTML = "30"; document.getElementById("myTable").rows[1].cells[2].innerHTML = "Germany"; |
jQuery:
1 2 3 |
$("#myTable tr:eq(1) td:eq(0)").text("Alex"); $("#myTable tr:eq(1) td:eq(1)").text("30"); $("#myTable tr:eq(1) td:eq(2)").text("Germany"); |
В обоих случаях, с помощью индексов rows и cells указывается нужная строка (rows[1]) и ячейка (cells[0], cells[1], cells[2]), а затем методы innerHTML или text() задают новые значения для данных.
- При необходимости, замените другие данные таблицы таким же способом.
В результате, данные в таблице будут заменены на новые.
от
rachel ,
год назад
@sylvester
Для того чтобы заменить данные в таблице с помощью JavaScript или 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>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
<td>USA</td>
</tr>
<tr>
<td>Mary</td>
<td>25</td>
<td>Canada</td>
</tr>
</tbody>
</table>
|
JavaScript для замены данных:
1 2 3 4 |
// Заменяем данные в первой строке таблицы
document.getElementById("myTable").rows[1].cells[0].textContent = "Alex";
document.getElementById("myTable").rows[1].cells[1].textContent = "30";
document.getElementById("myTable").rows[1].cells[2].textContent = "Germany";
|
jQuery для замены данных:
1 2 3 4 |
// Заменяем данные в первой строке таблицы
$("#myTable tr:eq(1) td:eq(0)").text("Alex");
$("#myTable tr:eq(1) td:eq(1)").text("30");
$("#myTable tr:eq(1) td:eq(2)").text("Germany");
|
Оба примера позволят вам заменить данные в таблице, измените номер строки и ячейки (отсчет начинается с 0), чтобы указать нужную ячейку для замены.
15