Obtaining ROW ID from a Table created with MySql to use with an OnClick Function

Question

I have a table created with PHP from an Sql Database that successfully displays the table information using the following code example.

<table class="mytable loottable" id="guildmembers">
<?php

  $query = mysql_query("SELECT $member.charname, $member.char_lvl, $trskill.skill_desc, .....

  if (mysql_num_rows($query) > 0) {

    while (false !== ($row = mysql_fetch_assoc($query))) {
      echo '<tr id="'.$row['charname'].'">';    <-- setting row id here 
      echo '<td class="lootrow" id="memth1">'.$row['charname'].'</td>';
      echo '<td class="lootrow" id="memth2">'.$row['rank_desc'].'</td>';
      echo '<td class="lootrow" id="memth3">'.$row['class_name'].'</td>';
      echo '<td class="lootrow" id="memth4">'.$row['char_lvl'].'</td>';
      echo"</tr>\n";
    }
    mysql_free_result($query);
  }
?>
</table>

Example of page source where i have verified that each table row is assigned the correct id.

<tr id="Calysta"><td class="lootrow" id="memth1">Calysta</td><td class="lootrow" id="memth2">Guild Leader</td><td class="lootrow" id="memth3">Inquisitor</td></tr>

<tr id="Rynanx"><td class="lootrow" id="memth1">Rynanx</td><td class="lootrow" id="memth2">Guild Leader</td><td class="lootrow" id="memth3">Mystic</td>

I am setting each table ROW ID to the first field which is always unique. Then i am trying to use this ID in the following function to redirect users to a profile page when they click on a row in the table.

    <script type="text/javascript">
        $(document).ready(function () {
            $("table.mytable").each( function() {
                table = $(this);
                if ($(table).attr("id")=="guildmembers") {
                    $(this).click(function(){
                        window.location.href = "http://eq2players.com"+
                            "/Kithicor/" + $(this).attr("id") + "/";
                    });
                }
            })
        });
    </script>

Which should open a new page in the browser with the following address for instance if the first row is clicked : "http://everquest2.com/Kithicor/Calysta/"

Instead no matter which row is clicked the web url being created is "http://everquest2.com/Kithicor/guildmembers/"

which is the Tables ID. not the ID of the row being clicked. I have tried various solutions and cannot figure how to get the row ID in this click function. Any help with this would much appreciated. Thanks.

Answer 1

Here you go, just did this quick, changed some things, please be mindful of using duplicate id's its BAD, you shouldn't. Also you over complicated your Javascript:

HTML EXAMPLE:

<table class="mytable loottable" id="guildmembers">
<tr class="linkRow" id="test1">
    <td>test1</td>
</tr>
<tr class="linkRow" id="test2">
    <td>test2</td>
</tr>
<tr class="linkRow" id="test3">
    <td>test3</td>
</tr>    
</table>

jQuery:

$(document).ready(function () {
    $(".linkRow").each( function() {
        id = $(this).attr("id")
        $(this).click(function(){
        window.location.href = "http://eq2players.com"+
                    "/Kithicor/" + id + "/";
        });
    });
});

jsFiddle Link:

http://jsfiddle.net/TJBX5/

Answer 2

You are installing your click handler on the table. Therefore, when you call $(this).attr("id") , you are asking for the table's id. You need to install the click handler on each row in the table.