javascript - 如果单击按钮，则更改颜色表行

Question

我想在单击按钮时更改表格行的颜色。但我的代码有问题。当我点击按钮时，表格行的颜色没有改变。

CSS:

tr.highlighted td {
    background: red;
}

HTML:

<table id="data" border="1" cellspacing="1" width="500">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<button type="button" id="change">
Change
</button>

JQuery:

$('#data tr').click(function(e) {
        $('#change').click(function() {
        $('#data tr').removeClass('highlighted');
        $(this).addClass('highlighted');
    })
});

Answer 1

更新

添加了

演示 2 和 演示 3。其中一个演示的行为正如 OP 所评论的那样。

• 演示 2: <tr>通过单击选择然后通过单击按钮突出显示。

• 演示 3:与演示 2 相同，但一次只能突出显示一行。

---

委托(delegate)文档对象的点击事件。将检测到对文档(基本上是整个页面)的任何点击——这当然是不可取的。

`$(document).on("click',...`

委托(delegate)对点击的实际 react 和不 react 的是称为事件委托(delegate)的编程模式的目标。 jQuery 提供了一个可选的第二个参数，称为 data任何事件方法签名中的对象。这个参数基本上是一个选择器字符串，它指定了 $(this) 的范围。 :

`$(document).on("click', '#data td, #change', ...

因此上面的示例将点击事件专门委托(delegate)给任何 <td>在 #data 内或 #change .单击委托(delegate)元素以外的任何地方都将被忽略(除非在线下有另一个单击事件处理程序)。最后一个参数是回调函数，当被任何 <td> 上的点击事件触发时将被调用。的 #data或 #change .回调函数使用$(this)和流控制来委托(delegate)点击事件并确定行为(或结果)。在演示中它基本上是 .toggleClass() .addClass() 的方法目标<tr>(s)没有 .highlighted类和反向.removeClass()目标 <tr>(s)已经有 .highlighted类。

演示中评论了更多详细信息。

单击任意 <td>直接和它的 parent <tr>类 .highlighted被切换。

点击按钮和所有.highlighted所有类(class)<tr>被切换。

演示 1

点击 <tr>或按钮突出显示 <tr>

/*
Delegate click event on document -- 
Consider clicks only on #data td or #change
*/
/*
if the clicked tag is a <td>...
get the .closest <tr> from that <td> and add .highlighted 
class if it doesn't have it otherwise remove .highlighted
*/
/*
...otherwise get all <tr> and toggle the .highlighted class
*/
$(document).on('click', '#data td, #change', function(e) {
  if ($(this).is('td')) {
    $(this).closest('tr').toggleClass('highlighted');
  } else {
    $('#data tr').toggleClass('highlighted');
  }
});

tr.highlighted td {
  background: red;
}

<table id="data" border="1" cellspacing="1" width="500">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<button type="button" id="change">
Change
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

演示2

点击<tr>选择/取消选择然后单击按钮以突出显示所有选定的 <tr> .

$(document).on('click', '#data td, #change', function(e) {
  if ($(this).is('td')) {
    $(this).closest('tr').toggleClass('selected');
  } else {
    $('#data tr:not(.selected)').removeClass('highlighted');
    $('#data tr.selected').addClass('highlighted');
  }
});

tr.highlighted td {
  background: red;
}

<table id="data" border="1" cellspacing="1" width="500">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<button type="button" id="change">
Change
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

演示3

最后<tr> clicked 被选中，然后在单击按钮时突出显示

$(document).on('click', '#data td, #change', function(e) {
  if ($(this).is('td')) {
    $('#data tr').removeClass('selected');
    $(this).closest('tr').addClass('selected');
  } else {
    $('#data tr').removeClass('highlighted');
    $('.selected').addClass('highlighted');
  }
});

tr.highlighted td {
  background: red;
}

<table id="data" border="1" cellspacing="1" width="500">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<button type="button" id="change">
Change
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>