0

私はこのコードを以下に持っています、私はwhileループによってそのデータを取得する最初のテーブルを持っています。このテーブルには、「詳細」のすべての行ボタンを含む「詳細」という1つの行があります。私はjqueryのこのコードを試しましたが、最初のボタンでのみ機能します。たとえば、テーブルに10行あり、もちろん10個のボタンがあるため、最初のボタンのみが機能し、「table2」が表示されますが、他のボタンは機能しません。このボタンに関連するtable2を表示するために、ユーザーがクリックしたボタンを判別する変数をjqueryに渡すことができると思います。私はこれをグーグルで検索しましたが、グーグルは私を失望させます、結果はありません。どんな助けでも大歓迎です。

<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>
4

1 に答える 1

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>

于 2012-04-20T15:45:29.693 に答える