CODEWITHSUNDEEP
jqueryhtmlcss
Gurunath Bhopale
Gurunath Bhopale

Reputation: 21

How to set background color on click of table data?

I am trying one jquery code to set background color on click of table data. The code is working fine for siblings table data from each row. The problem is when I click on column of [0,0] position and then if I click on column [1,0] both columns getting same background color. I want background color only for selected columns, not to its top and bottom columns.

$(function() {
  $('.table tr').on('click', 'td', function() {
    alert(1);
    $(this).addClass('active').siblings().removeClass('active');
  });
});
td.active {
  background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid main-content registration">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="text-center color-blue">Claim Status</h2>
      <h4 class="text-center color-blue">Most recent 15 transactions</h4>
      <div class="provider-table col-sm-offset-2">
        <div class="field-info" style="display:none">
          Provider
        </div>
        <div class="table-responsive">
          <table class="table denial-table claim-table">
            <thead>
              <tr class="background-blue">
                <th>Provider Name</th>
                <th>From Date</th>
                <th>To &nbsp; Date</th>
                <th class="test" data-toggle="tooltip" title="You need to create an element inside a td and apply a tooltip to it," data-placement="bottom" data-container="body" title="">Paid Date</th>
                <th data-original-title="You need to create an element inside a td and apply a tooltip to it," data-toggle="tooltip" data-placement="bottom" data-container="body" title="">Billed Amount</th>
                <th>Paid Amount</th>
                <th>Paid/Denied In Process</th>

              </tr>
            </thead>

            <tbody>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td colspan="7">
                  <ul class="pagination pagination-lg">
                    <li><a href="#">&laquo;</a>
                    </li>
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                    <li><a href="#">3</a>
                    </li>
                    <li><a href="#">4</a>
                    </li>
                    <li><a href="#">5</a>
                    </li>
                    <li><a href="#">&raquo;</a>
                    </li>
                  </ul>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>


    </div>
  </div>
</div>

Upvotes: 0

Views: 96

Answers (2)

Roma
Roma

Reputation: 282

$(function() {
	  $('.table tr').on('click', 'td', function() {
	    $('.table tr td').removeClass('active');
	    $(this).addClass('active');   
	  });
	});
td.active {
  background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid main-content registration">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="text-center color-blue">Claim Status</h2>
      <h4 class="text-center color-blue">Most recent 15 transactions</h4>
      <div class="provider-table col-sm-offset-2">
        <div class="field-info" style="display:none">
          Provider
        </div>
        <div class="table-responsive">
          <table class="table denial-table claim-table">
            <thead>
              <tr class="background-blue">
                <th>Provider Name</th>
                <th>From Date</th>
                <th>To &nbsp; Date</th>
                <th class="test" data-toggle="tooltip" title="You need to create an element inside a td and apply a tooltip to it," data-placement="bottom" data-container="body" title="">Paid Date</th>
                <th data-original-title="You need to create an element inside a td and apply a tooltip to it," data-toggle="tooltip" data-placement="bottom" data-container="body" title="">Billed Amount</th>
                <th>Paid Amount</th>
                <th>Paid/Denied In Process</th>

              </tr>
            </thead>

            <tbody>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td colspan="7">
                  <ul class="pagination pagination-lg">
                    <li><a href="#">&laquo;</a>
                    </li>
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                    <li><a href="#">3</a>
                    </li>
                    <li><a href="#">4</a>
                    </li>
                    <li><a href="#">5</a>
                    </li>
                    <li><a href="#">&raquo;</a>
                    </li>
                  </ul>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
		

    </div>
  </div>
</div>

Upvotes: 1

zer00ne
zer00ne

Reputation: 43880

Add the following:

 $('td').removeClass('active');

By first removing .active class from every <td> it ensures that whatever is assigned .active afterwards is the only <td>to have .active. BTW, you won't need this part either:

.siblings().removeClass('active')


$(function() {
  $('.table tr').on('click', 'td', function() {
    $('td').removeClass('active');
    $(this).addClass('active');


  });
});
td.active {
  background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid main-content registration">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="text-center color-blue">Claim Status</h2>
      <h4 class="text-center color-blue">Most recent 15 transactions</h4>
      <div class="provider-table col-sm-offset-2">
        <div class="field-info" style="display:none">
          Provider
        </div>
        <div class="table-responsive">
          <table class="table denial-table claim-table">
            <thead>
              <tr class="background-blue">
                <th>Provider Name</th>
                <th>From Date</th>
                <th>To &nbsp; Date</th>
                <th class="test" data-toggle="tooltip" title="You need to create an element inside a td and apply a tooltip to it," data-placement="bottom" data-container="body" title="">Paid Date</th>
                <th data-original-title="You need to create an element inside a td and apply a tooltip to it," data-toggle="tooltip" data-placement="bottom" data-container="body" title="">Billed Amount</th>
                <th>Paid Amount</th>
                <th>Paid/Denied In Process</th>

              </tr>
            </thead>

            <tbody>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td>abc</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>02/17/2016</td>
                <td>$120.53</td>
                <td>$0.00</td>
                <td>In Process</td>
              </tr>
              <tr>
                <td colspan="7">
                  <ul class="pagination pagination-lg">
                    <li><a href="#">&laquo;</a>
                    </li>
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                    <li><a href="#">3</a>
                    </li>
                    <li><a href="#">4</a>
                    </li>
                    <li><a href="#">5</a>
                    </li>
                    <li><a href="#">&raquo;</a>
                    </li>
                  </ul>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>


    </div>
  </div>
</div>

Upvotes: 1

Related Questions