使用JS更改表tr元素

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。因此，您正在寻找带有 that 的第二个元素id，它显然不存在，也不可能存在。要解决此问题，您需要children()查看tr. 另请注意此示例中使用了不显眼的事件处理程序。内联事件属性不再是良好实践，应尽可能避免。document.querySelector('.button').addEventListener('click', function() {&nbsp; var tr = $('#tbl_id_4');&nbsp; 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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Id</th>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr id="tbl_id_1">&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>Peter</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr id="tbl_id_4">&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; <td>Paul</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><input type="button" class="button" value="Click Me" />还值得注意的是，由于您已经在使用 jQuery，因此您可以这样做：$('.button').on('click', function() {&nbsp; $('#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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Id</th>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr id="tbl_id_1">&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>Peter</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr id="tbl_id_4">&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; <td>Paul</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><input type="button" class="button" value="Click Me" />