retrieve id of table rows?

Question

i have this script bellow to open table2 when clicking on the buttom 'more details'

 <script>
  $(document).ready(function() {

       $('#Table1 tr').click(function(event){

         $('#Table2').show();
         alert($(this).attr('id'));
       });
     });

</script>

and this my code

 <table id= "Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
    $sql2=..
    $sql3 = blabla ;
    while($row3 =mysql_fetch_array($sql3)){
    $sql4 = mysql_query (" SELECT $ww as place FROM data WHERE $ww =".$row3[$ww]." and  id_user = ".$userid." ");
    $row4 = mysql_fetch_array($sql4) ;
    $string = "<blink > here  </blink>" ;

    $wnumber = $row3[$ww] ;

     echo "<tr id= '".$wnumber."'><td  style= 'text-align : center ;'>Week ".$row3[$ww]."
              </td>" ;
     echo "<td >".(int) $row3["percent"] ."% </td>";
     echo "<td > "?><?php if($row4['place'] == 
     $row3[$ww] and $row2['id'] == $userid ){ echo $string ; } else { echo "";} ;?><?php
     "</td>";
     echo "<td ><button class='showr'>More Details</button> </td></tr>";
    //More Details when clicking on this buttom it open the table2
     }
   </tr>
 </table>

this is second table

 <?php
    echo "<div id= 'Table2' style= 'display:none;'>";
    echo "<table width='100%' border='1' cellspacing='0' cellpadding='0'>";
    echo "<th> Week ".$wnumber."</th>";
    echo "<th>try2</th>";
    echo "<tr ><td>day</td>";
    echo "<td>fff</td></tr>";
    echo "</table></div>";
 ?>

*what i have now 5 rows with 5 buttoms . *what it happen now is when clicking on every bottom it echo same '$wnumber' lets say 6. however it defers from row to row , - script works good with alert of the id of which row is clicked. - only the last buttom who works with the last id of row. *what i want is every bottom works with its row id which echo the right '$wnumber' * what i have tried is (make variable in the div)

   echo "<div id= '".$wnumber."' style= 'display:none;'>"; 

instead of

    echo "<div id= 'Table2' style= 'display:none;'>"; 

but didnt work.

hope its clear and there is solution of it.

EDIT : this source code

   <script src="http://code.jquery.com/jquery-latest.js"></script>


    <script>
    $(document).ready(function() {

   $('#Table1 tr').click(function(event){

     $('#Table2').show();
     alert($(this).attr('id'));
   });
 });

  </script>

  <br />
  <table id= "Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
  <th >Weeks</th>
 <th ><p></p></th>

 <th > Your place</th>
 <th > More Details</th>
<tr>
 <tr id= '1'><td  style= 'text-align : center ;'>Week 1</td><td style= 'text-align : 
  center ;'>33% </td><td  style= 'text-align : center ;'> <td style= 'text-align :  
  center ;'><button class='showr'>More Details</button></td></tr><tr id= '6'><td   
  style= 'text-align : center ;'>Week 6</td><td style= 'text-align : center ;'>33%   
  </td><td  style= 'text-align : center ;'> <td style= 'text-align : center   
  ;'><button  
  class='showr'>More Details</button></td></tr><tr id= '13'><td  style= 'text-align:   
  center ;'>Week 13</td><td style= 'text-align : center ;'>33% </td><td  style=   
  'text-align : center ;'> <blink style= 'color:#990000 ;font-weight: bolder;' >  69   
  here </blink><td style= 'text-align : center ;'><button class='showr'>More   
  Details</button></td></tr></tr>

 </table>
 <br />
 <div id= 'Table2' style= 'display:none;'><table width='100%' border='1'  
  cellspacing='0' cellpadding='0'><th> Week 13</th><th>try2</th><tr ><td>day</td>  
  <td>fff</td></tr></table></div>
  <br /><br /> <br />

Answer 1

I copy / pasted your code into a jsFiddle and it seems to work as expected. Clicking on the row sends an alert with the correct ID.

http://jsfiddle.net/JeeNN/

Is there something I'm missing in your intent here?

Note : Best practice would be to skip the inline CSS and add external styling for your tables. Also, valid HTML is a must.

---

Update:

I went ahead and formatted the php code you posted so it's a bit easier to read. There's some variables that aren't defined and a couple other issues, but I'm sure you have it correct in your php file.

I think that you're going to want to run the loop a second time to create the second table. In this second loop, echo out the second table once per loop - you'll end up with a bunch of tables (one per row plus the first table). Then simply swap the visibility of the tables as user's click each id.

Is that what you're looking for? If not, perhaps try to rephrase your question.

Here's that formatted code:

<table id="Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
<?php
$sql2 = [..];
$sql3 = [..];
$ww = ?;

while($row3 = mysql_fetch_array($sql3)){

    $sql4 = mysql_query ("SELECT $ww as place FROM data WHERE $ww =".$row3[$ww]." and  id_user = ".$userid." ");
    $row4 = mysql_fetch_array($sql4) ;
    $string = "<blink> here </blink>" ;

    $wnumber = $row3[$ww];

    echo "<tr id='".$wnumber."'>";
        echo "<td style='text-align:center;'>Week ".$row3[$ww]."</td>";
        echo "<td>".(int) $row3["percent"] ."% </td>";
        echo "<td>":
        if($row4['place'] == $row3[$ww] and $row2['id'] == $userid ){
            echo $string;
        } else {
            echo "&nbsp;";
        }
        echo "</td>";
        //More Details when clicking on this buttom it open the table2
        echo "<td ><button class='showr'>More Details</button></td>";
    echo "</tr>";
} ?>
</table>

<div id= 'Table2' style= 'display:none;'>
    <table width='100%' border='1' cellspacing='0' cellpadding='0'>
        <tr>
            <th> Week <?php echo $wnumber; ?></th>
            <th>try2</th>
        </tr>
        <tr>
            <td>day</td>
            <td>fff</td>
        </tr>
    </table>
</div>

Answer 2

Try something like this:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $('#Table1 tr').click(function(event){
            $('#details').find('#week' + $(this).attr('id')).show();
            // alert($(this).attr('id'));
        });
    });

</script>
<?php

$result = mysql_query($sql);

// save the results to an array so you can loop them twice
while($row = mysql_fetch_array($result)) :
    $rows[] = $row;
endwhile;

?>
<table id="table1">
    <tr>
        <th>heading</th>
        <th>heading</th>
        <th>heading</th>
        <th>heading</th>
    </tr>
    <?php foreach ($rows as $row) : // loop #1 to output the main table ?>
    <tr id="<?php echo $row['ww'] ?>">
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td><button type="button">More details</button></td>
    </tr>
    <?php endforeach; ?>
</table> <!-- end table 1 -->

<div id="details">
    <?php foreach ($rows as $row) : // loop #2 to output a table for each set of details ?>
    <table id="week<?php echo $row['ww'] ?>" style="display: none">
        <tr>
            <th>Week <?php echo $row['ww'] ?></th>
            <th>try2</th>
        </tr>
        <tr>
            <td>value</td>
            <td>value</td>
        </tr>
    </table>
    <?php endforeach; ?>
</div> <!-- end details -->

Answer 3

I tried your html code after correcting the missing td, tr. And then clicking on each row / button displays the div. Ensure you form proper html code in your php echo