從表格行獲取HTML數據，然后單擊javascript警報

Question

我的最終目標是單擊表上的一行，然后在其旁邊的表單中進行填充以進行更新。 在我編寫表單填充代碼之前，這里的代碼只是“嘗試”以單擊一行，並使其顯示在具有行數據的Javascript警報中。

在這里，我使用PHP填充了表格。 TR類具有“ updatetbl”，以后可與javascript一起使用。 我使用了來自此問題的代碼示例： 單擊獲取表行數據

if ($patients->num_rows > 0){
    while($row = $patients-> fetch_assoc()) {
         echo '<tr class="updatetbl">';
         echo '<td class="updatetbl">' . $row['ID'] . '</td>';
         echo '<td class="updatetbl">' . $row['Forename'] . '</td>';
         echo '<td class="updatetbl">' . $row['Surname'] . '</td>';
         echo '<td class="updatetbl">' . $row['DOB'] . '</td>';
         echo '<td class="updatetbl">' . $row['Address'] . '</td>';
         echo '<td class="updatetbl">' . $row['Postcode'] . '</td>';
         echo '<td class="updatetbl">' . $row['Telephone'] . '</td>';
         echo '<td class="updatetbl">' . $row['Email'] . '</td>';
         echo '<tr>';
     }
}else{
  echo "0 results";
}

我想首先將數據放入Java警報中（我只想在放入表單之前先查看數據）

要填充警報，並注冊單擊，我具有以下javascript。

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

    alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
        + $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , "));
});
</script>

據我所知，tr.updatetbl專注於單擊此處？ 然后收集表數據。

有任何想法嗎？

更新：我有等等。

 <table class="table table-hover">
      <thead>
           <tr>
             <th>ID</th>
             <th>Forename</th>
             <th>Surname</th>
             <th>D.O.B</th>
             <th>Address</th>
             <th>Postcode</th>
             <th>Tel</th>
             <th>Email</th>
           </tr>
      </thead>

     <?php
        $servername = removed
        $dbname = removed
        $username = removed
        $password = removed

        $connection = new mysqli($servername, $username, $password, $dbname);

    if ($connection->connect_error) {
           die('Could not connect: ' . $connection->connect_error);
       }

     $sql = "SELECT ID, Forename, Surname, DOB, Telephone, Email, Address, Postcode FROM people";
      $people= $connection->query($sql);

      if ($patients->num_rows > 0){
           while($row = $patients-> fetch_assoc()) {
              echo '<tr class="updatetbl">';
              echo '<td>' . $row['ID'] . '</td>';
              echo '<td>' . $row['Forename'] . '</td>';
              echo '<td>' . $row['Surname'] . '</td>';
              echo '<td>' . $row['DOB'] . '</td>';
              echo '<td>' . $row['Address'] . '</td>';
              echo '<td>' . $row['Postcode'] . '</td>';
              echo '<td>' . $row['Telephone'] . '</td>';
              echo '<td>' . $row['Email'] . '</td>';
              echo '</tr>';
        }

 }
  else
 {
  echo "0 results";
 }
  $connection->close();
  ?>
 </table>

解決了：

我已經弄清楚了-我用JavaScript將編譯后的代碼放入新的jFiddle中，但仍然無法正常工作。 我不知道為什么，所以我看了你一眼，發現那邊的庫是jQuery！ 我的是標准的JS。 因此我意識到我沒有包含<script src="jquery-1.11.3.min.js"></script>

我對下面的答案投了贊成票，因為盡管我確信所有其他答案都將奏效，但我得到了輕松的幫助。

Answer 1

您在此行的末尾有一個“）”，這是不需要的，這就是為什么它不起作用的原因：

`alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
    + $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , ")); which isnt needed.

此外，只需updatetbl上添加類updatetbl 。

的HTML

<table>
    <tbody>
    <tr class="updatetbl">
        <td >ID</td>
        <td >Forename</td>
        <td >Surname</td>
        <td >DOB</td>
        <td >Address</td>
        <td >Postcode</td>
        <td >Telephone</td>
        <td >Email</td>
    </tr>
    <tbody>
</table>

JS：

$(".updatetbl").click(function(){
   var tableData = $(this).children("td").map(function(){
       return $(this).text();
   }).get();

    alert("Data = "+ tableData[0] + " , " + tableData[1] + " , "
        + tableData[2] + " , " + tableData[3] + " , ");
});

Answer 2

請為此找到以下代碼

$( "table tr.updatetbl" ).on( 'click', function( e ) {
    e.preventDefault();
    var data = [];
    $( this ).find( "td" ).each( function(){ data.push( $.trim( $( this ).text() ) ) } );
    console.log( data );
});

小提琴鏈接： https : //jsfiddle.net/4tk4w0ua/1/

Answer 3

怎么樣;

        $("tr.updatetbl").click(function(){

            var data = [];

            $("tr.updatetbl td").each(function(i, td){
                data.push(td.text());
            });

            console.log(data);

        });