Стиль таблицы HTML Предыдущий брат - PullRequest
Новая
       1

Стиль таблицы HTML Предыдущий брат

0 голосов
/ 24 мая 2018

Я ищу стиль таблицы в каждой предыдущей строке.Каждый раз, когда наведена белая ячейка, зеленый заголовок над ней должен иметь другой цвет фона.Любая помощь будет оценена. 

    $("#customers tr:odd").hover(function() {
      $(this).prev().css({
        "background-color": "red !important"
      });
    }, function() {
      $(this).prev().css({
        "background-color": "black !important"
      });
    });
    #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;
    }
<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>

1 Ответ

0 голосов
/ 24 мая 2018

Вы можете сделать что-то подобное с помощью добавления / удаления классов.Вы должны указать td/th, чтобы добавить к ним css.Я использую removeClass метод, чтобы уменьшить путаницу с двумя !important css свойствами. 

$("#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');
});
#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;
}
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...