PHPでマウスをクリックしてhtmlテーブルから行を取り出す方法は？

Question

PHPを使用してHTMLテーブルにレコードを表示しています。行をクリックすると、変数にのitemID（クリックされている）を格納できるようにしようとしています。何らかの理由で、私が望む行をクリックすると、JavaScriptのアラートはうまく動作せず、それも起こりません。私は何か些細なことを逃していますか？

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

Answer 1

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

Answer 2

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

あなたのテーブルに書くと、これはalert.Pleaseへの道の1本にしようとしているで警告

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

を表示するにはJavaスクリプト機能を作成してください。これはあなたのために働くでしょう。それは私の場合に働いています。