如何在鼠标移过表格中的一行时将鼠标指针更改为手势并更改行的颜色答案

【问题标题】：how to i change mouse pointer to hand signal and change the color of row while mouse go over a row in table如何在鼠标移过表格中的一行时将鼠标指针更改为手势并更改行的颜色
【发布时间】：2015-06-04 14:34:24
【问题描述】：

<logic:iterate name="studentDetails" id="student" indexId="index">
    <tr>
        <td><bean:write name="student" property="name" /></td>
        <td><bean:write name="student" property="age" /></td>
        <td><bean:write name="student" property="class" /></td>
        <td><bean:write name="student" property="mark" /></td>
        <td><bean:write name="student" property="result" /></td>
    </tr>
</logic:iterate>

我想显示所有学生详细信息，并希望在鼠标移过结果表中的行时以不同的颜色突出显示传递的学生详细信息/将鼠标指针设置为手势。

我如何检查学生详细信息是否通过以及如何在表格迭代器中设置突出显示颜色？

【问题讨论】：

请添加解析后的HTML
这似乎可以用 CSS 轻松完成（例如：tr:hover { cursor:pointer; background:#f0f0f0; }）并让浏览器处理它，而不是使用一些 jQuery/JavaScript 逻辑来完成它

标签： javascript jquery ajax iterator

【解决方案1】：

在

中添加onmouseover或onmouseout

<tr onmouseover="ChangeColor(this,${student.result})>

也添加脚本

<script type="text/javascript">
    function ChangeBackgroundColor(row, result) { 
        if(result =="pass")
        {
            row.style.backgroundColor = 00FF33;
             $(row).css("cursor","pointer");
        }
        else
            row.style.backgroundColor = #FF0000 ;
 }
</script>

【讨论】：

【解决方案2】：

至于“手势”，我假设您的意思是鼠标光标切换到手。这可以通过应用样式cursor: pointer; 来完成。要突出显示该行，您可以使用 :hover 伪类。

结合两者，在鼠标悬停时将每一行突出显示为红色：

tr:hover {
  cursor: pointer;
  background-color: red;
}

下面的例子：

tbody tr:hover {
  background-color: red;
  cursor: pointer;
}

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Susie</td>
      <td>Snowflake</td>
    </tr>
  </tbody>
</table>

【讨论】：