我正在尝试更改函数中的一些表格单元格,我已将其简化为这个简短的片段,以帮助我了解出了什么问题。
我基本上需要在已识别的 <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" />
最佳答案
您正在 #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" />
关于javascript - 使用JS更改表tr元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61268190/