Issue with accessing a value from a table with jquery

Question

Hey guys I am trying to get a specific name from a table. Here is my code:

$(document).ready(function () {
    $("#NotesAccessor").click(function () {
      var notes_name = $(this).document.getElementById("#user_table");
      alert(notes_name);
      run();
    });
});

Here is the above this is where I am trying to access the associated username with which table row was click with the #notesAccessor

Table:

 .........
    <td>
        $csvusername
    </td>
.........
    <td>
    ";
      if ($checkNotes[1] == 'No')
    {
        echo "None";
    }
    if ($checkNotes[1] == 'Yes')
    {
            echo "<a href='#' id='NotesAccessor'>Click to access</a>";
    }
    echo "
    </td>
........

My question is - how do I get the $csvusername of the associated NotesAccessor so I can then send this to a dialog in Jquery and open of the notes of that one person I need to get.

Hope this makes sense.

update:

here is full table:

<table class='results'>
    <tr class='firsttr' style='background:gray;'>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Email</td>
        <td>Phone</td>
        <td>Username</td>
        <td>Password</td>
        <td>Status</td>
        <td>Combined Single Limit</td>
        <td>Bodily Injury Each Person</td>
        <td>Bodily Injury Each Accident</td>
        <td>Property Damage</td>
        <td>Address</td>
        <td>Notes</td>
        <td>#</td>
    </tr>"; $j = 0; while ($row = $sth->fetch(PDO::FETCH_ASSOC)) { $val = 1; $csvfirst
    = $row; $csvfirstname = $csvfirst['firstname']; $csvlastname = $csvfirst['lastname'];
    $csvemail = $csvfirst['email']; $csvphone = $csvfirst['phone']; $csvusername
    = $csvfirst['username']; $csvpassword= $csvfirst['password']; $csvstatus
    = $csvfirst['status']; $csvnotes = $csvfirst['notes']; $csl = $csvfirst['Combinedlimit'];
    $bodyinj = $csvfirst['bodyinjur']; $eachacc = $csvfirst['bodyinjureachacc'];
    $propertydmg = $csvfirst['propertydmg']; // Select the current employees
    address $psql = "SELECT MailingAdrs FROM insuranceverificationdisclaimer
    WHERE TraineeUsername =:user"; $psth= $DBH->prepare($psql); $psth->execute(array(':user'
    => $csvusername )); while ($prow = $psth->fetch(PDO::FETCH_ASSOC)) { $pcheck
    = $prow; $address = $pcheck['MailingAdrs']; } if ($csvstatus != "No Longer
    Work Here" && $csvstatus == "Confirmed"){ //check to see if notes exist
    if (empty($csvnotes)) { $checkNotes = 0; } else { $checkNotes = 1; } $memberfirstnamearray[$j]
    = $csvfirstname; $memberlastnamearray[$j] = $csvlastname; $memberemailarray[$j]
    = $csvemail; $memberphonearray[$j] = $csvphone; $membercsl[$j] = $csl;
    $memberbodyinj[$j] = $bodyinj; $membereachacc[$j] = $eachacc; $memberpropertydmg[$j]
    = $propertydmg; $memberstatus[$j] = $csvstatus; $memberaddress[$j] = $address;
    $j++; $i++; echo "
    <tr>
        <td>$csvfirstname</td>
        <td>$csvlastname</td>
        <td>$csvemail</td>
        <td>$csvphone</td>
        <td class='user_table'>$csvusername</td>
        <td>$csvpassword</td>
        <td>$csvstatus</td>
        <td>$csl</td>
        <td>$bodyinj</td>
        <td>$eachacc</td>
        <td>$propertydmg</td>
        <td>$address</td>
        <td>"; if ($checkNotes == 0) { echo "None"; } if ($checkNotes == 1) { echo
            "<a href='#' id='NotesAccessor'>Click to access</a>"; } echo "</td>
        <td>$i</td>
    </tr>"; } }
</table>

Answer 1

You are mixing pure JavaScript with jQuery, you can solve it as follows.

First of all, you can put a class to identify the <td> with $csvusername, like class='td_with_csvusername' and then do this:

$(document).ready(function () {
    $(".NotesAccessor").on("click", function () {
        var td = $(this).parent().parent().find(".td_with_csvusername");
        alert(td.html());
    });
});

Answer 2

Posting the output HTML is better than the PhP version but I assume you have HTML similar to this:

<table>
    <tbody>
        <tr>
            <td>UserName</td>
            <td><a href='#' id='NotesAccessor'>Click to access</a>"</td>
        </tr>
    </tbody>
</table>

Then you can look for the previous sibling of the parent of the anchor by using jQuery's parent() and prev(), similar to this:

$(document).ready(function () {
    $("#NotesAccessor").click(function () {
        var notes_name = $(this).parent().prev().html();
        alert(notes_name);
        //run();
    });
});

---

DEMO - Looking to the matching username column

---

If the above HTML is not like that then please post the exact output as it is important for knowing how to traverse to the matching td in the same tr when you click the anchor. Assuming that is what you are trying to achieve.

Edit

Only seen your update now. I know you already have a solution but for completeness I have added to this answer anyway in case it is useful to future users.

In your sample code you already have class on the user-name cell user_table. You can use that to target instead then. Also, given you said you will have several rows with the #NoteAccessor, you should change the id="NoteAccessor" to class="NoteAccessor" as ids have to be unique or it is invalid HTML. In addition jQuery only returns the first element with a matched id.

The script which you end up with is straight forward then using parent() as before but now you can also use prevAll() specifying the class selector:

$(document).ready(function () {
    // using class ".NotesAccessor" instead of id "#NotesAccessor" 
    // as element is repeated in each tr
    $(".NotesAccessor").click(function () {
        var notes_name = $(this).parent().prevAll('.user_table').html();
        alert(notes_name);
    });
});

---

DEMO - Using parent() and prevAll('.user_table')

---