Получить значение ячейки таблицы в строке (JS или jQuery)

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть таблица, которая включает 50 идентичных

 <tr>
    <td>#</td>
    <td>#</td>
    <td>123123</td>
</tr>
...

и теперь я могу получить значение конкретной строки следующим образом

 $("#tableId tbody tr").each(function(){
    var a = $(this).children();
    var arr =a[2].innerText; //get each row
    a[2].innerText = statename // get the third cell in each row
});

В данном случае statename это объект с 50 названиями состояний. Все, что я хочу сделать сейчас, это заменить это 123123 на каждое имя состояния внутри объекта. Чтобы это выглядело следующим образом:

 <tr>
    <td>#</td>
    <td>#</td>
    <td>Alabama</td>
</tr>
<tr>
    <td>#</td>
    <td>#</td>
    <td>Alaska</td>
</tr>
<tr>
    <td>#</td>
    <td>#</td>
    <td>Arizona</td>
</tr>
...

Я попытался выполнить цикл внутри jQuery, но это не сработало. Пожалуйста, помогите, большое вам спасибо.

1. Как выглядят данные с 50 состояниями? Какова структура, массив или объект или и то, и другое? Итак, существует ли столько строк, сколько состояний в ваших данных? Соответствует ли число в таблице ключу в данных?

Ответ №1:

Вы можете попробовать использовать each метод с find методом, в названии селектора вы можете выполнить поиск по последнему <td> элементу td:last . Вот так:

 var statenames = ['Alabama', 'Alaska', 'Arizona'];

$("#tableId tbody tr").each(function(index){
    $(this).find('td:last').text(statenames[index]);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tableId">
  <tbody>
    <tr>
      <td>#</td>
      <td>#</td>
      <td>123123</td>
    </tr>
    <tr>
      <td>#</td>
      <td>#</td>
      <td>123123</td>
    </tr>
    <tr>
      <td>#</td>
      <td>#</td>
      <td>123123</td>
    </tr>
  </tbody>
</table>

Ответ №2:

Используя vanilla js, вы можете легко получить последние элементы td в tr, выполнить цикл по ним и присвоить новые значения узлам

 const stateNames = ['Alabama', 'Alaska', 'Arizona'];
document.querySelectorAll('tr td:last-child')
  .forEach((x, i) => x.textContent = stateNames[i])

 <table>
  <tr>
    <td>#</td>
    <td>#</td>
    <td>123123</td>
  </tr>

  <tr>
    <td>#</td>
    <td>#</td>
    <td>123123</td>
  </tr>
  <tr>
    <td>#</td>
    <td>#</td>
    <td>123123</td>
  </tr>
</table>

1. Большое вам спасибо!!! Я работал над этим несколько дней, и это прекрасно решило мою проблему!!! Не могли бы вы подробнее рассказать об использовании функции arrow в этом случае? Я полагаю, что это JS вместо jQuery.

2. Это просто способ определения функции, но способом ES6 вместо function(){} мы делаем ()=>

Ответ №3:

Убедитесь, что ваша переменная statename является массивом, и не забудьте индекс состояния

 // find elements
statename = ["Alabama", "Alaska", "Arizona"]
$("#tableId tbody tr").each(function(index){
    var a = $(this).children();
    var arr =a[2].innerText; //get each row
    a[2].innerText = statename[index] // get the third cell in each row
});