Как получить значение тд другого тд при нажатии на флажок?

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 для получения необходимого значения, когда установлен флажок SomeValueWorkCompleted:

    $('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]

для получения значения тд?

Answer 1

Если вы используете jQuery, вы можете использовать селектор :nth-child ( подробнее здесь )

Поскольку ваш флажок находится внутри указанного c строку, вы можете переместить селектор в эту строку, а затем использовать дочерний селектор, например:

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

Answer 2

Вы можете использовать index () и eq () из jQuery, чтобы получить значения следующим образом:

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

Answer 3

Если вы знаете «индекс» тд, из которого вам понадобятся данные (ie. Это всегда будет 5-й тд в таблице), вы можете использовать:

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

... чтобы сгенерировать массив всех tds, тогда, если td всегда является 5-м в таблице:

console.log(tds[4].innerText)

... должно быть значением, которое вы ищете.

РЕДАКТИРОВАТЬ: Извините: tds [4] .innerText Еще не пили кофе. ;)