javascript - 每行仅突出显示一个单元格

Question

我的目标是能够在单击时突出显示一个单元格，并在再次单击时取消突出显示。

每一行只能突出显示一个单元格。

下面是我尝试的代码，这里是 fiddle .

谢谢。

HTML:

<div class="hws-css-filter" >
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
</div>

jQuery

$('.hws-css-filter-td').click(function () {
    var theTable = $(this).closest('.hws-css-filter-tr');
    $(theTable).each(function () {
        $(this).css("background-color", "");
    });
    $(this).css("background-color", "blue");
});

Answer 1

像下面这样首先移除所有 sibling 的背景颜色。

$('.hws-css-filter-td').click(function() {
  $(this).siblings().css("background-color", "");
  $(this).css("background-color", "blue");
});

.hws-css-filter {
  display: table;
  margin: auto;
  vertical-align: middle;
}

.hws-css-filter-tr {
  display: table-row;
  padding: 0;
  margin: 0;
}

.hws-css-filter-td {
  display: table-cell;
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hws-css-filter">
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
</div>

更新:选择未选择。

$('.hws-css-filter-td').click(function() {
  $(this).siblings().removeClass('selected');
  $(this).toggleClass('selected');
});

.hws-css-filter {
  display: table;
  margin: auto;
  vertical-align: middle;
}

.hws-css-filter-tr {
  display: table-row;
  padding: 0;
  margin: 0;
}

.hws-css-filter-td {
  display: table-cell;
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.selected {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hws-css-filter">
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
  </div>
</div>

UPDATED FIDDLE