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>

查询：

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

标签： javascriptjquery

Answer 1

更新

添加了演示 2和演示 3。其中一个演示的行为与 OP 希望评论的一样。

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

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

---

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

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

委派什么对点击做出实际反应，什么没有，是称为事件委托的编程模式的目标。datajQuery 提供了一个可选的第二个参数，在任何事件方法签名中称为对象。此参数基本上是一个选择器字符串，指定范围$(this)：

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

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

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

直接点击any <td>，其父<tr>类.highlighted被切换。

单击按钮，所有.highlighted类都<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>单击被选中，然后在单击按钮时突出显示

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