Why is jQuery not returning nearest table row values?

Question

I've been trying to get the data from a table row via jQuery but it is returning nothing. I've looked around for multiple tutorials but haven't found anything that can help me.

Here is my code:

jquery:

function markAsRead(checkbox) {
    if (checkbox.checked) {
        var current_row = $('#msg-table').closest("tr");

        var column1 = current_row.find("td:eq(0)").text();
        var column2 = current_row.find("td:eq(1)").text();
        var column3 = current_row.find("td:eq(2)").text();
        var column4 = current_row.find("td:eq(3)").text();

        var data = column1 + " " + column2 + " " + column3 + " " + column4;

        console.log(data);
    } else {
        return;
    } 
}

php and html:

<table class="w3-table-all" id="msg-table">
    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Message</th>
            <th>Date Sent</th>
            <th></th>
        </tr>
        </thead>


        <?php 
            foreach ($this->paginator as $value):
                if ($value->active == 1):
        ?>
            <tr class="w3-hover-text-red w3-text-black">
                <td>
                    <b><?php echo $value->from; ?></b>
                </td>

                <td>
                    <b><?php echo $value->subject; ?></b>
                </td>

                <td>
                    <b><?php echo $value->message; ?></b>
                </td>

                <td>
                    <b><?php echo $value->date_sent; ?></b>
                </td>

                <td>
                    <input type="checkbox" class="w3-check" onchange='markAsRead(this);' id="<?php echo $value->id; ?>">&nbsp; Mark As Read
                </td>
            </tr>
            <?php else: ?>
                <tr class="w3-hover-text-red w3-text-black">

                    <td>
                    <?php echo $value->from; ?> 
                    </td>

                    <td>
                    <?php echo $value->subject; ?>
                    </td>

                    <td>
                        <?php echo $value->message; ?>
                    </td>

                    <td>
                        <?php echo $value->date_sent; ?>
                    </td>   

                    <td>
                        <input type="checkbox" class="w3-check" onchange='markAsUnread(this);' id="<?php echo $value->id; ?>">&nbsp; Mark As Unread
                    </td>                           
                </tr>
                <?php 
                       endif;
                       endforeach;
                ?>
</table>

here are some screenshots of the problem I'm having:

Any help would be appreciated, as I've been stuck on this issue for a few days and would like to figure out how to get it fixed.

Answer 1

use $(checkbox).closest("tr"); to find the tr parent och the checkbox

function markAsRead(checkbox) {
    console.clear();
    if (checkbox.checked) {
        var current_row = $(checkbox).closest("tr");

        var column1 = current_row.find("td:eq(0)").text();
        var column2 = current_row.find("td:eq(1)").text();
        var column3 = current_row.find("td:eq(2)").text();
        var column4 = current_row.find("td:eq(3)").text();

        var data = column1 + " " + column2 + " " + column3 + " " + column4;

        console.log(data);
    } else {
        return;
    } 
}