单击复选框时如何获取不同 td 的 td 值?

Question

我有一个这样的表：

<tr class="rgRow" id="someID" style="color:Red;">
<td>
<input id="SelectCheckBox" type="checkbox" name="SelectColumnSelectCheckBox">
</td>
<td style="white-space:nowrap;display:none;">1896730</td>
<td style="white-space:nowrap;display:none;">171748</td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;">Onboard</td>
<td style="white-space:nowrap;display:none;">&nbsp;</td>
<td style="white-space:nowrap;display:none;">&nbsp;</td>
<td style="white-space:nowrap;">&nbsp;</td>
<td style="white-space:nowrap;">
<input id="SomeValueWorkCompleted" type="checkbox" name="SomeValueWorkCompleted" checked="checked">
</td>
<td style="white-space:nowrap;display:none;">&nbsp;</td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;display:none;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;display:none;">12345678.87599587</td>
<td style="white-space:nowrap;display:none;">987654.04205552</td>
</tr>

和 jQuery 代码，用于从表中的另一个 td 中获取一些值(本例中的FR-12345在表中确实存在两次(。我需要得到的值是向上 5 td 和向下 4 td。目前，我们正在使用以下jQuery在选中SomeValueWorkDone复选框时获取所需的值：

$('input[id$=WorkCompleted][type=checkbox]').change(function() { 
if($(this).prop("checked") == true){
var test = $(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]
console.log(test.innerText)
}
else if($(this).prop("checked") == false){
}
});

有没有比使用更好的方法

$(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]

抢夺TD的价值？

Answer 1

如果您知道 td 的"索引"，则需要来自的数据(即，它将始终是表中的第 5 个 TD(，您可以使用：

const tds = document.getElementById("tableIdGoesHere").querySelectorAll("td");

。要生成所有 TD 的数组，如果 TD 始终是表中的第 5 个：

console.log(tds[4].innerText)

。应该是您要查找的值。

编辑：对不起：tds[4].innerText 还没有喝咖啡。 ;)

Answer 2

如果你使用的是jQuery，你可以使用:nth-child选择器(更多信息在这里(

由于复选框位于特定行内，因此您可以将选择器移动到该行，然后使用子选择器，如下所示：

// If the 5th child
$(this).parent("td :nth-child(5)")

Answer 3

你可以使用 jQuery 的 index(( 和 eq(( 来获取如下值：

$("#SomeValueWorkCompleted").change(function() {
var parentTD = $(this).closest("td");
var index = $("#someID td").index(parentTD);
value = $("#someID td")
.eq(index - 5)
.text();
console.log(value);
});