使用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元素上使用索引访问器。因此，您正在寻找具有id的第二个元素，它显然不存在，也不可能存在。

要解决此问题，您需要查看tr的children()。还要注意在这个例子中使用了一个不引人注目的事件处理程序。内联事件属性不再是好的做法，应尽可能避免使用。

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" />