从循环创建的表中提取数据（PHP）

Question

I have the following problem: I'm creating an HTML table with a PHP for-loop. There is data and a button in each row. When the user presses the button (id="detail"), the "id"-field of the corresponding row (id="patID") is supposed to be stored in a PHP variable. Every attempt I have made failed because javascript simply takes the first element on the page with the id "patID" and (to my knowledge) I don't have a way to select this element in PHP. This is my code:

 <?php
    if (isset($_POST['search']))
    {
    //irrelevant details of MySQL PDO-connection omitted
     $result = $statement->fetchAll();
        if ($result && $statement->rowCount() > 0)
        { ?>
            <h2>Ergebnisse</h2>

            <table>
            <thead>
            <tr>
            <th>#</th>
            <th>Vorname</th>
            <th>Nachname</th>
            <th>Geburtstag</th>
            <th>Klasse/Kurs</th>
            <th>Vorerkrankungen</th>
            <th>Allergien</th>
            <th>Anmerkung</th>
            <th>Aktualisiert</th>
            <th> Optionen</th>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach ($result as $row)
            { ?>
                <tr id="row">
                <td id="patID"><?php echo escape($row["id"]); ?></td>
                    <td><?php echo escape($row["firstName"]); ?></td>
                    <td><?php echo escape($row["lastName"]); ?></td>
                    <td><?php echo escape($row["birthday"]); ?></td>
                    <td><?php echo escape($row["course"]); ?></td>
                    <td><?php echo escape($row["preIllnesses"]); ?></td>
                    <td><?php echo escape($row["allergies"]); ?> </td>
                    <td><?php echo escape($row["note"]); ?> </td>
                    <td><?php echo escape($row["created"]); ?> </td>
                     <td>
                        <button id="detail">Mehr</button>
                    </td> 
                </tr>
        <? } ?>
            </tbody>
            </table>

            <?php

        }
        else
        { ?>
            <blockquote><b>Keine Ergebnisse gefunden.</b></blockquote>
            <?php
        }
    }
    ?>

Answer 1

The 'id' attribute can only be given once to an html-element. You should you a class instead:

 <button class="detail">Mehr</button>

You should store the id in an extra attribute if you want to grab it later in javascript. For example, if you are using jQuery, you can use a data attribute:

<button class="detail" data-id="some_id">Mehr</button>
<script>
    $('.detail').click(function () {
        var id = $(this).data('id');
        // do something with id
    });
</script>

This will add a click-listener to all elements with the 'detail' class. So if a user clicks on an element having that class , it will execute the given function with this pointing to the clicked element. And since that element has the 'data-id' attribute, we can use jQuery's data function to get the contents of that attribute.

Answer 2

Your way if you change ID to class

<tr class="row">
    <td class="patID"><?php echo escape($row["id"]); ?></td>
    <td><?php echo escape($row["firstName"]); ?></td>
    <td><?php echo escape($row["lastName"]); ?></td>
    <td><?php echo escape($row["birthday"]); ?></td>
    <td><?php echo escape($row["course"]); ?></td>
    <td><?php echo escape($row["preIllnesses"]); ?></td>
    <td><?php echo escape($row["allergies"]); ?> </td>
    <td><?php echo escape($row["note"]); ?> </td>
    <td><?php echo escape($row["created"]); ?> </td>
     <td>
        <button class="detail">Mehr</button>
    </td> 
</tr>

<script>
    $(function() {
        $('.detail').click(function(){
            // var id = $(this).parents('.row').find('.patID').html();

            alert($(this).parents('.row').find('.patID').html());
        });
    });
</script>