Как с помощью javascript или jquery заменить данные таблицы?

Пользователь

от sylvester , в категории: JavaScript , год назад

Как с помощью javascript или jquery заменить данные таблицы?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от velma , год назад

@sylvester 

Для замены данных в таблице с помощью JavaScript или jQuery можно использовать следующий подход:

  1. В 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
  


  1. В 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() задают новые значения для данных.

  1. При необходимости, замените другие данные таблицы таким же способом.


В результате, данные в таблице будут заменены на новые.

Пользователь

от rachel , 5 месяцев назад

@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), чтобы указать нужную ячейку для замены.