CODEWITHSUNDEEP
jqueryhtmlcss
tryingToLearn
tryingToLearn

Reputation: 11653

Table rows not highlighting upon selection / click

I have multiple tables in my application and I want one of them to behave differently. So I tied the CSS class to a particular table Id. Here is the fiddle for the same: http://jsfiddle.net/akshaysuri/twya05x1/ The hover functionality is working fine, but the row color does not change on clicking the row.

jQuery:

$("#myTable").on("click", "tr", function(e) {     
    $(this)
        .toggleClass("selected")
        .siblings(".selected")
        .removeClass("selected");
});

CSS:

#myTable tr:hover.selected td,
#myTable tr:hover td {
    background-image: none;
    background-color: #D3D3D3;
}
#myTable tr.selected td {
    background-image: none;
    background-color: red;
}

HTML:

<table id='myTable'>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>DDD</td>
        <td>EEE</td>
        <td>FFF</td>
    </tr>
</table>

Upvotes: 1

Views: 263

Answers (2)

Prakash
Prakash

Reputation: 576

Try this one.

function highlight(e) {
  if (selected[0]) selected[0].className = '';
  e.target.parentNode.className = 'selected';
}

var table = document.getElementById('myTable'),
  selected = table.getElementsByClassName('selected');
table.onclick = highlight;
td {
  border: 1px #DDD solid;
  padding: 5px;
  cursor: pointer;
}
.selected {
  background-color: red;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
    <td>CCC</td>
  </tr>
  <tr>
    <td>DDD</td>
    <td>EEE</td>
    <td>FFF</td>
  </tr>

</table>

Upvotes: 3

noctrnal
noctrnal

Reputation: 191

Answered here - in your case, you could .removeClass('clicked') on all tr before the toggle.

Create a CSS class:

.clicked {
  background-color: yellow;
}

and then simply toggle that class it via jQuery:

$('.star').click(function(){
  $(this).toggleClass('clicked');
});

Upvotes: -2

Related Questions