Question

我正在尝试根据选择框（人员编号）更改来填充html表。正在从mysql数据库中检索数据。然后，我想在使用jquery盘旋时突出显示一行。

我能以正确的方式解决这个问题吗？

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代码

$(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）将放在另一个{{1}上标签。

data

因此，当您尝试调用它时，您可以这样做：

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

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

1 个答案: