如果使用Jquery单击td，则将表中的所有tr元素着色

Question

当我从任何子td元素调用时，我正在尝试使用jQuery为所有tr元素着色。 这是我的代码。

<table>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script>
  function download_excel(element,a,b,c){
    $(element).parents('table').children('tr').css("background-color", "#fbfbfb");
  }
</script>

因为我想突出显示点击的（已经有代码），休息我想重置为以前的背景颜色..那是y

有什么建议么？

Answer 1

试试这个： - 使用find()函数而不是children()函数。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table> <script> function download_excel(element,a,b,c){ $(element).parents('table').find('tr').css("background-color", "#fbfbfb"); } </script> 

Answer 2

尝试使用.find（）以下列方式获取当前匹配元素集中每个元素的后代：

 function download_excel(element,a,b,c){ $(element).parents('table').find('tr').css("background-color", "#fbfbfb"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table> 

Answer 3

虽然你已经接受了这个问题的答案，但我觉得值得指出你初步方法的一些问题; 当在浏览器中编写HTML时， <tbody>元素是可选的，在构造DOM时，会定期创建该元素 - 如果它还不存在 - 并将<tr>元素放在其中; 因此行：

$(element).parents('table').children()

首先找到所有祖先<table>元素（如果嵌套<table>元素，这可能本身就是一个问题），然后找到children()元素，这将是<tbody>元素。

通常，这仍然允许颜色显示“通过” <tr>和<td>元素，但在这种情况下，您已为<tr>元素指定了background-color ，这会阻止<tbody>背景显示。

所以有两种选择：

1. 在编写HTML时定义<tbody>元素，并在<tbody>元素上指定background-color ：

     function download_excel(element, a, b, c) { $(element).closest('tbody') // note that 'limegreen' is used simply for easier // visualisation of the change: .css("background-color", "limegreen"); } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody style="background-color: #eaeaea;"> <tr style="color: rgb(31, 73, 125);"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="color: rgb(31, 73, 125);"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="color: rgb(31, 73, 125);"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

请注意，除了将background-color放在<tbody>元素上之外，我还从<tr>元素中删除了该属性。 如果替代样式指定background-color您可能还需要添加属性background-color: inherit; 在<tr>和/或<td>元素上。

2. 或者，你可以从element导航到最近的<tbody>元素，然后找到它的子元素 - <tr>元素 - 并按照你的意图指定它们的background-color ：

     function download_excel(element, a, b, c) { $(element).closest('tbody') .children('tr') // note that 'limegreen' is used simply for easier // visualisation of the change: .css("background-color", "limegreen"); } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"> <td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> 

此外，值得指出的是，代替style属性，您应该使用样式表，以便更轻松地维护和更新生成的网站的样式，这也有利于简化HTML：

 function download_excel(element, a, b, c) { $(element).closest('tbody') // note that 'limegreen' is used simply for easier // visualisation of the change: .css("background-color", "limegreen"); } 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { /* in most cases this would be unnecessary, since the default cursor for an <a> element is the 'pointer,' so long as an 'href' attribute-value is specified: */ cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a onclick="download_excel(this,'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

您还使用突兀的JavaScript来绑定链接的事件处理，这再次需要在更新文档时更加小心和注意; 相反，如果您使用JavaScript绑定事件处理程序，那么维护变得更容易：

// here we find all <a> elements present within <td> elements,
// and bind the anonymous function of the on() method to the
// 'click' event:
$('td a').on('click', function() {

  // the anonymous function then calls the named function
  // along with its arguments:
  download_excel(this, 'BL8', 'ATR', 'AWFR');
});

 function download_excel(element, a, b, c) { $(element).closest('tbody') // note that 'limegreen' is used simply for easier // visualisation of the change: .css("background-color", "limegreen"); } $('td a').on('click', function() { download_excel(this, 'BL8', 'ATR', 'AWFR'); }); 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

上面的事件绑定需要使用匿名函数来调用命名函数，因为没有源可以从元素本身检索参数; 但是，如果data-* custom属性可用于检索参数，则可以使用命名函数：

function download_excel() {
  // the element on which the functin is called, the 'this,'
  // is passed automatically via the on() method:
  let element = this,

    // here we retrieve the dataset of the element,
    // the Object in which the custom (data-*) properties
    // and values are kept:
    data = element.dataset,

    // here we retrieve the property-values
    // and assign to variables:
    a = data.a,
    b = data.b,
    c = data.c;

  $(element).closest('tbody')
    // note that 'limegreen' is used simply for easier
    // visualisation of the change:
    .css("background-color", "limegreen");
}

$('td a').on('click', download_excel);

 function download_excel() { let element = this, data = element.dataset, a = data.a, b = data.b, c = data.c; $(element).closest('tbody') .css("background-color", "limegreen"); } $('td a').on('click', download_excel); 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a data-valuea="BL8" data-valueb="ATR" data-valuec="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-valuea="BL8" data-valueb="ATR" data-valuec="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

在你发布的代码中，每个函数调用的参数 - 以及链接文本本身，所以我认为这是出于演示目的 - 是相同的; 如果这反映了您的用例，您可以使用ES6为事件处理函数定义默认值（但如上所述，我认为这不适用于您的实际用例）：

// Note that here we declare the default-values after declaring the
// event variable which is automatically passed to the function and
// which will always be the first argument:
function download_excel(event, a = "BL8", b = "ATR", c = "AWFR") {
  let element = this;

  // just to confirm my assertion, and to test that it works in
  // your own browser(s):
  console.log(a, b, c);
  $(element).closest('tbody')
    .css("background-color", "limegreen");
}

$('td a').on('click', download_excel);

 function download_excel(event, a = "BL8", b = "ATR", c = "AWFR") { let element = this; console.log(a, b, c); $(element).closest('tbody') .css("background-color", "limegreen"); } $('td a').on('click', download_excel); 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a>ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

值得注意的是，上述内容也很容易在本机JavaScript中实现（包括使用默认值，但是如上所述：我不相信使用相同的参数具有代表性）：

function download_excel() {
  let element = this,
    data = element.dataset,
    a = data.a,
    b = data.b,
    c = data.c;
  console.log(a, b, c);

  element.closest('tbody').style.backgroundColor = 'limegreen';
}

// here we use document.querySelectorAll() to retrieve a
// static nodeList of all <a> elements with a <td> ancestor,
// and iterate over that NodeList using NodeList.prototype.forEach():
document.querySelectorAll('td a').forEach(

  // using an Arrow function:
  // 'anchor' is a reference to the current node of the
  // NodeList over which we're iterating;
  // and here we use the EventTarget.addEventListener()
  // method to bind the download_excel() function as the
  // event-handler of the 'click' function:
  (anchor) => anchor.addEventListener('click', download_excel)
);

 function download_excel() { let element = this, data = element.dataset, a = data.a, b = data.b, c = data.c; console.log(a, b, c); element.closest('tbody').style.backgroundColor = 'limegreen'; } document.querySelectorAll('td a').forEach( (anchor) => anchor.addEventListener('click', download_excel) ); 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

如果您的（用户）浏览器可能不支持箭头功能，可以使用典型的匿名函数重写：

function download_excel() {
  let element = this,
    data = element.dataset,
    a = data.a,
    b = data.b,
    c = data.c;
  console.log(a, b, c);

  element.closest('tbody').style.backgroundColor = 'limegreen';
}

document.querySelectorAll('td a').forEach(function(anchor){
  anchor.addEventListener('click', download_excel)
});

 function download_excel() { let element = this, data = element.dataset, a = data.a, b = data.b, c = data.c; console.log(a, b, c); element.closest('tbody').style.backgroundColor = 'limegreen'; } document.querySelectorAll('td a').forEach(function(anchor) { anchor.addEventListener('click', download_excel) }); 

 tbody { background-color: #eaeaea; } tr { color: rgb(31, 73, 125); } td { padding-left: 5px; } a { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><a data-a="BL8" data-b="ATR" data-c="AWFR">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td> <td>14</td> <td>0</td> <td>56</td> <td>56</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

参考文献：

• HTML：
  • 自定义data-*属性 。
• JavaScript的：
  • 箭头功能 。
  • document.querySelectorAll() 。
  • EventTarget.addEventListener() 。
  • HTMLElement.dataset 。
• jQuery的：
  • children() 。
  • closest() 。
  • on() 。
  • parents() 。
• 相关的其他Stack Overflow问题：
  • 为什么在使用子选择器时table> tr> td不起作用？