HTML-Tabelle von externen PHP zu füllen, um Hervorhebung bei Hover über Zeile zu ermöglichen

Question

Ich versuche, eine HTML-Tabelle basierend auf einem Auswahlfeld (mit Personalnummern) zu füllen. Die Daten werden aus einer MySQL-Datenbank abgerufen. Ich möchte dann eine Zeile hervorheben, wenn sie über jquery verschoben wird.

Gehe ich den richtigen Weg?

main.php

<div id="logHistory"> 
     <label id="historyTableLabel">Your Log History</label> 
     <table id="logTable"> 
      <tr id="headers"> 
      <td>Log Date</td> 
      <td>LogType</td> 
      <td>Start Time</td> 
      <td>End Time</td> 
      <td>Duration</td> 
      </tr> 
     </table> 
    </div> 

select.php

$staffNum = isset($_POST['staffNumber']) ? $_POST['staffNumber'] : 0; 
     if($staffNum > 0) 
     { 
      populateLogHistory($con, $staffNum); 
     } 

     function populateLogHistory($con, $staffNum) 
     { 
      //Retrieve data from entries table 
      $result = mysqli_query($con, "SELECT EntryID, LogDate, LogType, StartTime, StartDate, FinishTime, FinishDate FROM Entries WHERE StaffNumber=$staffNum"); 

      while($row = mysqli_fetch_array($result)) 
      { 
       $entryID = $row['EntryID']; 
       $logDate = $row['LogDate']; 
       $logTypeID = $row['LogType']; 
       $resulting = mysqli_query($con,"SELECT LogType FROM logType WHERE LogTypeID=$logTypeID"); 
       $logTypeStr = mysqli_fetch_array($resulting); 
       $startDate = $row['StartDate']; 
       $startTime = $row['StartTime']; 
       $start = $startDate . " " . $startTime; 
       $start = new DateTime($start); 
       $finishDate = $row['FinishDate']; 
       $finishTime = $row['FinishTime']; 
       $finish = $finishDate . " " . $finishTime; 
       $finish = new DateTime($finish); 
       $duration = $start->diff($finish); 

       echo "<tr id=".$entryID.">"; 
       echo "<td>".$logDate."</td>"; 
       echo "<td>".$logTypeStr[0]."</td>"; 
       echo "<td>".$startTime."</td>"; 
       echo "<td>".$finishTime."</td>"; 
       echo "<td>".$duration->h."hr ".$duration->i."</td>"; 
       echo "</tr>"; 
      } 
     } 

jquery Code

$(document).ready(function() 
{ 
    $("#staffMember").change(function() 
    { 
    //Check the mandatory first 
    var selectedIndex = $("#staffMember").prop('selectedIndex'); 
    isMandatory(selectedIndex, $(this)); 

    if(selectedIndex != -1) 
    { 
     //If there is a staff number call the select to populate the log history 
     var staffNum = $("#staffMember").val(); 
     var dataString = 'staffNumber=' + staffNum; 

     $.ajax({ 
     type: "POST", 
     url: "select.php", 
     data: dataString, 
     cache: false, 
     success: function(html) 
     { 
      $("#logTable").html(html); 
     } 
     }); 
    } 
    }).change(); 
}); 

Answer 1

verwenden CSS für das Schweben Teil:

.datarow:hover { 
    background-color: #ccc; 
} 

Unter der Annahme, dass Sie ein class Tag zu Ihrer besiedelten Zeile setzen:

echo '<tr id="'.$entryID.'" class="datarow">'; 

---

Für das Bestücken Teil verwenden .on() für jeden Anruf, so dass Sie noch einen weiteren Anruf auf Javascript DOM-Elemente tun.

$(document).on("change", "#staffMember", function(){ 

Und wenn Sie einen anderen Event-Handler auf den bevölkerten Daten tun wollen, machen wir es als stattdessen class Tag setzen und die Daten ($entryID) auf einem anderen data Tag sein wird.

echo '<tr data-artid="'.$entryID.'" class="datarow">'; 

Also, wenn Sie versuchen, es zu nennen, können Sie einfach tun:

$(document).on("click", ".datarow", function(){ 

    var entryid = $(this).attr('data-artid'); /* ENTRY ID OF THE CLICKED ROW */