CODEWITHSUNDEEP
javascriptjqueryhtml
Jason Tremain
Jason Tremain

Reputation: 1399

Toggle a td tag on click

Here's my problem. I have a table with 3 rows. Within each row there's a hidden 'check' icon tag that toggles on and off when you click a table's row. I've gotten that to work successfully so far. What i'm trying to do now is to only have one checkmark showing at a time. So if one row is already checked and you click on another row, it'll uncheck the previously checked row and show the checkmark in the newly selected row. Here's the HTML and js that I have currently.

$(document).ready(function () {
    var tr = $('#eventListings').find('tr');
    $(tr).click(function () {
        if ($(this).find('td i').hasClass('hide')) {
        $(this).find('td i').removeClass('hide');
    } else {
        $(this).find('td i').addClass('hide');
    }
    });
});
 <table  id="events" class="table">
      <tbody>
        <tr>
          <td>10/19 @ 4:30 PM</td>
          <td>Denver Broncos v San Francisco 49ers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>10/23 @ 4:25 PM</td>
          <td>Denver Broncos v San Diego Chargers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>11/23 @ 6:30 PM</td>
          <td>Denver Broncos v Miami Dolphins</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
      </tbody>
    </table>

Upvotes: 0

Views: 845

Answers (1)

T J
T J

Reputation: 43156

You can hide the visible checked items using :visible selector and then toggle the clicked item using toggleClass() as follows:

$(document).ready(function () {
    var tr = $('#events').find('tr');
    $(tr).click(function () {
        $("td i:visible").addClass('hide')
        $(this).find('td i').toggleClass('hide');
    });
});
/*For Demo Purpose*/

i::after{
  content:"checked";
}
i.hide{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table  id="events" class="table">
      <tbody>
        <tr>
          <td>10/19 @ 4:30 PM</td>
          <td>Denver Broncos v San Francisco 49ers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>10/23 @ 4:25 PM</td>
          <td>Denver Broncos v San Diego Chargers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>11/23 @ 6:30 PM</td>
          <td>Denver Broncos v Miami Dolphins</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
      </tbody>
    </table>

Upvotes: 1

Related Questions