Question

我希望每一行都有表格样式。每当白色单元格悬停时，其上方的绿色标题应使用不同的背景颜色进行样式设置。任何帮助将不胜感激。

＆＃13;

    $("#customers tr:odd").hover(function() {
      $(this).prev().css({
        "background-color": "red !important"
      });
    }, function() {
      $(this).prev().css({
        "background-color": "black !important"
      });
    });

＆＃13;

    #customers {
      width: 100%;
    }
    
    #customers td {
      border: 1px solid #ddd;
    }
      
    #customers tr:hover {
      background-color: yellow;
    }
    
    #customers th {
      text-align: center;
      background-color: #4CAF50;
      color: white;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
     <head>
     </head>
     <body>
       <table id = "customers">
          <tr>
            <th colspan = "3"> Words</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr colspan=3>
            <th colspan = "3"> More Words </th>
          </tr>
          <tr>
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
            <td>Sweden</td>
          </tr>
        </table>
      </body>
    </html>

＆＃13;

Answer 1

您可以通过添加/删除类来执行此类操作。您必须指定td/th向其添加css。我使用removeClass方法来减少与两个!important css属性的混淆。

＆＃13;

$("#customers tr:odd").hover(function() {
  $(this).prev().find('th').removeClass('black');
  $(this).prev().find('th').addClass('red');
}, function() {
  $(this).prev().find('th').removeClass('red');
  $(this).prev().find('th').addClass('black');
});

＆＃13;

#customers {
  width: 100%;
}

#customers td {
  border: 1px solid #ddd;
}

#customers tr:hover {
  background-color: yellow;
}

#customers th {
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

.red {
  background-color: red !important;
}

.black {
  background-color: black !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <table id="customers">
    <tr>
      <th colspan="3"> Words</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr colspan=3>
      <th colspan="3"> More Words </th>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

HTML表格样式上一个同级

1 个答案: