CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
michaelkazman
michaelkazman

Reputation: 67

HTML Table Style Previous Sibling

I am looking to have the table style each previous row. Anytime a white cell is hovered on, the green header above it should be styled with a different background color. Any help would be appreciated.

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

Upvotes: 1

Views: 244

Answers (1)

tech2017
tech2017

Reputation: 1806

You can do something like this through add/remove classes. You have to specify td/th to add css to them. I am using removeClass method to reduce confusion with two !important css properties.

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

Upvotes: 1

Related Questions