在MySQL表的上下文中使用jQuery

Question

I have some jQuery code that is having difficulty running because I'm using it with a dynamically created table (getting variables from a MySQL table). I would like to to display the corresponding PHP variable $row['name'] in the msg div. So it would say something like:

    $("#msg").text($("<?php echo $row['name']; ?> has been booked.");

Btw I'm not sure if that is the correct way of putting it.

Unfortunately when the user clicks on button3 it only updates the first msg div and ignores the rest. Is there any way for me to dynamically link jQuery instances with the PHP code generated so that it can update the correct msg div and display the correct message afterwards.

The jQuery code is in the head of my document and the PHP code is in the body.

jQuery code

<!-- alert -->

<script type="text/javascript">
 $(".button3").click(function() {
    $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button",this).text() + " has been booked.");
        });
    })
</script>

Dynamically created table:

if($res->numRows() > 0)
{
    echo "<table class='zebra'>
    <tr>
    <th scope='col'>Name</th>
    <th scope='col'>Capacity</th>
    </tr>";
    while($row = $res->fetchRow())
    {
        echo '<tr align="left">';
        echo "<td>{$row['name']}</td>";
        echo "<td>{$row['capacity']}</td>";

        <div>
        <input type='image' class='button3' src='resources/book.png'
        style='padding-top: 15px;'/>
        </div>

        <div id='msg'>
        </div>
        </td>";     
    }

Answer 1

I didn't test it, but I hope it will help you. I'm going to jsFiddle to check that out.

Here it is. I had to change a lot of thing in the HTML, I'm not sure if it's exactly what you wanted?

For a matter of laziness, I would add a class to the cell containing the name (and this way you won't have to bother about the order of the cells)

    echo "<td class="name">{$row['name']}</td>

Then, you can simply replace your onclick function to :

<script type="text/javascript">  $(".button3").click(function() {
    var clickedButton = $(this);
    $(this).parent().slideUp("slow", function () {
        $("#msg").text(clickedButton.parent().parent().find('.name').text() + " has been booked.");
        });
    }) </script>