jqueryで変数を渡す

Question

私はこのコードをベローにしています。私はwhileループでデータを取得する最初のテーブルを持っています。この表には「Details」の各行ボタンがある「More Details」の行が1つあります。 私はjqueryのこのコードを試してみましたが、最初のボタンでのみ動作します。 もちろん10個のボタンがあるテーブルには10個のボタンがありますので、ファーボタンだけが動作し、 'table2'仕事。 多分私はこのボタンで相対的なtable2を表示するためにどのボタンのユーザーがクリックしたかを決定するjqueryに変数を渡すことができると思います。 私はこれをgoogledしているが、googleは、私は、結果を私を作る。 ご協力いただければ幸いです。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <?php 
     $sql3= mysql_query("SELECT * FROM data "); 
     while($row3 =mysql_fetch_array($sql3)){ 
    ?> 
<script> 

$(document).ready(function() { 
    $('#showr').click(function(){ 
     $('#Table2').show(); 
    }); 
}); 
</script> 


    <table width='100%' border='1' cellspacing='0' cellpadding='0'> 
     <th>Weeks</th> 
     <th>date</th> 
     <th>place</th> 
     <th>More Details</th> 
     <tr> 
<?php 
     echo "<tr ><td style= 'text-align : center ;'>my rows1</td>" ; 
     echo "<td style= 'text-align : center ;'>myrows2</td>"; 
     echo "<td style= 'text-align : center ;'> myrows3</td>"; 
     echo "<td style= 'text-align : center ;'><button id='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>try</th> 
     <th>try2</th> 
     <tr> 
      <td>try3</td> 
      <td>trs</td> 
     </tr> 
    </table> 
</div> 

Answer 1

ボタンごとに異なる表を表示する場合は、ボタンと表の間にリレーションシップを作成するためにIDを使用します。私はあなたのテーブルで自動インクリメントのプライマリキーを使用していると仮定します。そうでない場合は、ループ内にカウンタを置いて、それをIDとして使用できます。

有効なテーブルを出力するためのコードは次のとおりです。

<?php 
while($row3 = mysql_fetch_array($sql3)){ 
//output your normal table rows 

//presuming a numeric primary key to use as id 
echo "<td><button id='showr_" . $row3['primaryKey'] . "' class='showr'>Show Details</button></td>"; 


} 
?> 

<?php 
//reset mysql data set so we can loop through it again to output the second tables 
mysql_data_seek($sql3, 0); 
while($row3 = mysql_fetch_array($sql3)){ 
//output hidden table 
echo "<table style='display: none' class='table2' id='table2_" . $row3['primaryKey'] . "'>"; 
//output rest of rows here... 
echo "</table>"; 
?> 

Javascriptが、ボタンがクリックされたことがわかり、そのボタンのidをつかむと、現在表示される可能性があります任意のテーブルを隠しながら、関連するテーブルが表示されます。

<script type='text/javascript'> 
$(document).ready(function() { 
    $('.showr').click(function(){ 
     //get id by splitting on the underscore within the 'id' attribute 
     //$(this) refers to the button that has been clicked 
     var id = $(this).attr('id').split('_')[1]; 

     //hide all table2's and then show the one we want 
     $('.table2').hide(); 
     $('#Table2_' + id).show(); 
    }); 
}); 
</script>