CODEWITHSUNDEEP
jquery
sc85
sc85

Reputation:

How to Highlight HTML table row with only ONE row can be highlighted?

$(document).ready(function() {
  $("tr").removeClass();
  $("tr:gt(0)").click(function() {
    $(this).css("color", "red")
  });
});
.highlight td {
  background: red;
}
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <link href="003.css" type="text/css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>NAME</td>
      <td>AGE</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>44</td>
    </tr>
    <tr>
      <td>Mary Green</td>
      <td>66</td>
    </tr>
    <tr>
      <td>Bob Black</td>
      <td>22</td>
    </tr>
  </table>
</body>

</html>

The following code is NOT working, but how to correct it?

Upvotes: 0

Views: 2993

Answers (2)

cobbal
cobbal

Reputation: 70805

maybe try changing

$("tr:gt(0)").click(function(){$(this).css("color","red")});

into 

$("tr:gt(0)").click(function() {
        $(".highlight").removeClass("highlight");
        $(this).addClass("highlight");
    });

Upvotes: 5

Joe Phillips
Joe Phillips

Reputation: 51200

You are not setting any of the <td> to class="highlight" so none of the backgrounds will be red.

Upvotes: 0

Related Questions