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

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> 的类(class)它确保无论分配什么.active之后是唯一<td>有 .active .顺便说一句，你也不需要这部分:

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