How to get value of a td of a different td when a checkbox is clicked?

Question

I have a table set up like this:

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

and jQuery code to grab some value from another td in the table ( FR-12345 in this example which does exists twice in the table). The value I need to get is 5 td up and 4 td down. Currently we are using the following jQuery to grab the needed value when the SomeValueWorkCompleted checkbox is checked:

    $('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){

            }
    });

Is there a better way than using

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

to grab the value of the td?

Answer 1

If you know the "index" of the td you'll need the data from (ie. it will always be the 5th td in the table), you can use:

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

...to generate an array of all tds, then if the td is always the 5th in the table:

console.log(tds[4].innerText)

...should be the value you're looking for.

EDIT: Sorry: tds[4].innerText Haven't had coffee yet. ;)

Answer 2

If you are using jQuery, you can use the :nth-child selector ( more info here )

Since your checkbox is inside a specific row, you can move your selector to that row and then use the child selector, like this:

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

Answer 3

You can use index() and eq() of jQuery to get the values as follows:

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