How to retrieve row from a html table on mouse click in PHP?

Question

I am displaying some records in an HTML table using PHP. I am trying to make it so that when I click on a row, I can store the itemID (that has been clicked on) in a variable. For some reason, when I click on the row I want, the alert in JavaScript just doesn't work nor does it happen. Am I missing something trivial?

<?php
    $con=mysqli_connect("localhost","root","mypassword","myDB");
    // Check connection
    if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    echo "<font color = 'darkgreen'> Connected to database. </font> <br>";

    $result = mysqli_query($con,"SELECT * FROM Inventory");

    echo "<table border='1'>
    <tr>
    <th>Item ID</th>
    <th>Item Name</th>
    </tr>";

    while($row = mysqli_fetch_array($result))
    {
    echo "<tr>";
    echo "<td>" . $row['itemID'] . "</td>";
    echo "<td>" . $row['itemName'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";

    mysqli_close($con);
    ?>

    <script type="text/javascript">
    $("tr.table").click(function() {
        var tableData = $(this).children("td").map(function() {
            return $(this).text();
        }).get();

        alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]));
    });
    </script>

As I see, you're calling the jQuery click on a <tr></tr> with the class "table", but I don't see where you set that class in your <tr></tr> — Alberto Rubio
– Alberto Rubio, Commented Nov 12, 2016 at 4:26
<tr class="table"> <th>Item ID</th> <th>Item Name</th> </tr> Just add the class to the table, but you still gonna need to tell JS you want ONLY this <tr> itemID and not all <tr> in your code. — Alberto Rubio
– Alberto Rubio, Commented Nov 12, 2016 at 4:30
Remove the in PHP part of the title. Looks like you'll be using JavaScript, since this is Event based... unless, of course, you want database info... then you sill send and receive info to the Server with JavaScript, using PHP with MySQL to access data and echo json_encode($assocArray). Oh, the font tag is dead. Just advice. The comments by @Alberto Rubio are what you need to know. — StackSlave
– StackSlave, Commented Nov 12, 2016 at 4:34

jeremykenedy · Accepted Answer · 2016-11-12 04:35:37Z

<?php
    $con=mysqli_connect("localhost","root","mypassword","myDB");
    // Check connection
    if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    echo "<h3 style='color: darkgreen;'> Connected to database. </h3> <br />";

    $result = mysqli_query($con,"SELECT * FROM Inventory");

    echo "<table border='1'>
    <tr>
    <th>Item ID</th>
    <th>Item Name</th>
    </tr>";

    while($row = mysqli_fetch_array($result))
    {
    echo "<tr>";
    echo "<td class='item-id'>" . $row['itemID'] . "</td>";
    echo "<td class='item-name'>" . $row['itemName'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";

    mysqli_close($con);
    ?>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script type="text/javascript">
    $("tr").click(function() {

        var id = $(this).find('.item-id').text();
        var name = $(this).find('.item-name').text();

        alert("Your data is: " + $.trim(id) + " , " + $.trim(name));
    });
    </script>

Pranav MS · Accepted Answer · 2016-11-12 04:34:28Z

0

echo "<tr onclick='showAlert($row['itemID'],$row['itemName']);'>";

please write in your table and create java script function to show alert

<script>
     function showAlert(TxtItemid,txtItemName){
      alert("Your data is: " + TxtItemid + " , " + txtItemName));
     }
</script>

this is one of the way to alert.Please have try on this. This will work for you. It is working in my case.

answered Nov 12, 2016 at 4:34

Pranav MS

2,3312 gold badges26 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to retrieve row from a html table on mouse click in PHP?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related