Изменить элементы таблицы tr, используя JS

Question

Я пытаюсь изменить несколько ячеек таблицы в функции, которую я сократил до этого короткого фрагмента, чтобы помочь мне понять, что происходит не так.

Мне в основном нужно использовать индексы столбцов для определенную строку таблицы <tr> и измените значение, показанное в этой ячейке.

Я пытался, глядя на различный код, который обращается к строкам таблицы,

tr.col[1].innerHTML = "NEW NAME";
tr.cell[1].innerHTML = "NEW NAME";

Кроме того, я ' В настоящее время я использую jQuery, так как это часть вызова ajax, но это может усложнить ситуацию. Я новичок в JS и jQuery и не знаю, какие части какие (я знаю, var tr = $('#tbl_id_4') не работает без jQuery

function ChangeName(){
    alert('Clicked');
    var tr = $('#tbl_id_4');
    tr[1].innerHTML = "NEW NAME";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tbl_id_1">
      <td>1</td>
      <td>Peter</td>
    </tr>
    <tr id="tbl_id_4">
      <td>4</td>
      <td>Paul</td>
    </tr>
  </tbody>
</table>

<input type="button" onclick="ChangeName()" value="Click Me" />

Answer 1

Вы используете индексатор доступа к элементу #tbl_id_4. Таким образом, вы ищете второй элемент с этим id, который явно не существует и не может существовать.

Чтобы исправить это, вам нужно взглянуть на children() из tr. Также обратите внимание на использование ненавязчивого обработчика событий в этом примере. Атрибуты встроенных событий больше не являются хорошей практикой, и их следует по возможности избегать.

document.querySelector('.button').addEventListener('click', function() {
  var tr = $('#tbl_id_4');
  tr.children()[1].innerHTML = "NEW NAME";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tbl_id_1">
      <td>1</td>
      <td>Peter</td>
    </tr>
    <tr id="tbl_id_4">
      <td>4</td>
      <td>Paul</td>
    </tr>
  </tbody>
</table>
<input type="button" class="button" value="Click Me" />

Стоит также отметить, что, поскольку вы уже используете jQuery, вы можете просто сделать это:

$('.button').on('click', function() {
  $('#tbl_id_4 td:eq(1)').text("NEW NAME");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tbl_id_1">
      <td>1</td>
      <td>Peter</td>
    </tr>
    <tr id="tbl_id_4">
      <td>4</td>
      <td>Paul</td>
    </tr>
  </tbody>
</table>
<input type="button" class="button" value="Click Me" />