Question

我有一个具有不同行（TR）的HTML表，当我单击一行时，背景颜色会发生变化（如果为空白，则变为蓝色，如果为蓝色，则变为白色）。

如何从此onclick事件中排除具有类EXPANDREDUCE的TD的TR？

我的代码如下，但是它不起作用，因为这样就可以在我单击的每个TR上起作用，但是我需要检查单击的TR中是否有一个或多个CLASS {{1} }，如果是的话，我不需要做任何事情：

EXPANDREDUCE

Answer 1

使用event.target属性，如下所示：

$("tr").on("click", function(event) {
  var tr = $(event.target);
});

注意：：要检查其是否具有类EXPANDREDUCE，请将选择器更改为"tr.EXPANDREDUCE"。

祝你好运。

Answer 2

这是一个例子：

$(function() {
  $("thead tr").addClass("background");
  $("tbody tr:even").addClass("even");
  $("tbody tr:odd").addClass("odd");
  $("tbody input:checkbox:checked").parent().parent().addClass("sel");

  $("tbody tr").click(function(e) {
    var flag = $(this).hasClass("sel");
    if (flag) {
      $(this).removeClass("sel");
    } else {
      $(this).addClass("sel");
    }
  });
});

table {
  width: 400px;
  border: 2px solid #999;
  text-align: center;
  border-collapse: collapse;
}

table td, table th {
  border: 2px solid #999;
  height: 25px;
}

.background {
  background-color: #CCC;
}

.even {
  background-color: #FFE7BA;
}

.odd {
  background-color: #FFF0F5;
}

.sel {
  background-color: #FFFF00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

如何仅选择被单击的“ tr”元素？

2 个答案: