passing variable in jquery

Question

i have this code bellow , i have first table which i get its data by while loop. and i have one row in this table which is 'More Details' with every line button of 'Details' . i have tried this code of jquery but it works only with the first button , say that i have 10 lines in table with 10 buttons of course , so only the firt button works and show the 'table2' , but the other buttons dont work . i have think that maybe i can pass a variable to jquery which determine on which button user have clicked to show the table2 which is relativ with this button. i have googled this but google make me down , no result. any help would be very appreciated.

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

Is that your actual code or have you tried to hack together an example? — Rory McCrossan
– Rory McCrossan, Commented Apr 20, 2012 at 15:44
yes its my own code , and sorry the php tag was in wrong place now its ok — echo_Me
– echo_Me, Commented Apr 20, 2012 at 15:50

Charles R · Accepted Answer · 2012-04-20 16:23:57Z

1

If you want to have each button show a different table, I would use ids to create a relationship between the button and the table. I presume that you're using an auto-incrementing primary key in your table; if not, you could just put a counter in the loop and use that as the id.

A lot of the code for outputting valid tables is left out below.

<?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>";
?>

The Javascript will see that a button is clicked, grab the id for that button, and show the relevant table while hiding any table that might currently be showing.

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

edited Apr 20, 2012 at 16:23

answered Apr 20, 2012 at 15:45

Charles R

4413 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

echo_Me Over a year ago

yes this works for all buttons but they give same data in 'table2', how to make every button give different data in 'table2'

Charles R Over a year ago

Oh, I misunderstood your question then. One way to achieve multiple table2's would be to output each unique "table2" as a hidden table, each with a unique id (table2_5). Then each button could have a corresponding id (showr_5). I will edit my answer.

Collectives™ on Stack Overflow

passing variable in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related