php - 从外部 php 填充 html 表以允许在悬停在行上时突出显示

Question

我正在尝试根据选择框(带有员工编号)的变化来填充 html 表格。正在从 mysql 数据库中检索数据。然后我想在悬停时使用 jquery 突出显示一行。

我的做法是否正确？

主.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>

选择.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代码

$(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

将此 CSS 用于悬停部分:

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

假设您将一个 class 标记放到填充的行中:

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

---

对于填充部分，使用 .on()对于每次调用，您仍然可以对 Javascript DOM 元素进行另一次调用。

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

如果你想对填充的数据做另一个事件处理程序，让我们把它作为一个 class 标签，数据 ($entryID) 将在另一个数据标签。

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

所以当你尝试调用它时，你可以这样做:

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

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