如何在点击表数据时设置背景颜色？

Question

我正在尝试使用一个jquery代码来点击表数据来设置背景颜色。代码适用于每行的兄弟表数据。问题是当我点击[0,0]位置的列然后如果我点击列[1,0]，两列都获得相同的背景颜色。我只想要选定列的背景颜色，而不是它的顶部和底部列。

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

Answer 1

添加以下内容：

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

首先从每个.active中删除<td>课程，它确保之后分配的.active内容只有<td> .active .siblings().removeClass('active') 。顺便说一下，你不需要这部分：

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


  });
});

＆＃13;

＆＃13;

td.active {
  background-color: red !important;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

td.active {
  background-color: red !important;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;