在jquery中传递变量

Question

我有这段代码在下面，我有第一个表，我通过while循环获取它的数据。我在这个表中有一行，它是'详细'的每一行按钮'更详细'。 我已经尝试了jquery的这段代码，但它只适用于第一个按钮， 说，我有10个表中有10个按钮的行，所以只有firt按钮工作并显示'table2'，但其他按钮不要工作。 我认为也许我可以传递一个变量给jquery，它决定了用户点击了哪个按钮来显示与此按钮相对的table2。 我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

如果你想让每个按钮都显示不同的表格，我会使用ids来创建按钮和表格之间的关系。我假定你在表中使用自动递增的主键;如果不是的话，你可以在循环中放一个计数器并用它作为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>