如果使用jQuery单击td，则为表内的所有tr元素上色

时间：2018-10-20 12:05:07

标签： javascript jquery html

当从任何子td元素调用jQuery时，我尝试使用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>

因为我要突出显示已单击的代码（已经有代码），剩下的我想重设为以前的背景色。。就是

有什么建议吗？

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

尝试使用.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>

答案 2 :(得分：1)

虽然您已经接受了该问题的答案，但我认为有必要指出您最初使用方法中的一些问题； <tbody>元素是编写HTML时的可选元素，而浏览器在构造DOM时会例行创建该元素（如果尚不存在）并将<tr>元素放入其中；因此这行：

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

首先找到所有祖先<table>元素（在嵌套<table>元素的情况下，这本身就是一个问题），然后找到children()元素，即{{ 1}}元素。

通常，这仍然允许颜色通过<tbody>和<tr>元素显示，但是在这种情况下，您已经为<td>分配了background-color元素，从而阻止显示<tr>背景。

所以有两种选择：

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

    <tbody>
        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>。

  1. 或者，您可以从<td>导航到最近的element元素，然后找到其子元素<tbody>并指定其{{1} }：

    <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"); }来使用样式表，以便更轻松地维护和更新最终网站的样式，这还具有简化HTML的好处： 

    <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
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");
}

您还使用了干扰性JavaScript来绑定链接的事件处理，这再次需要在更新文档时多加注意。相反，如果使用JavaScript绑定事件处理程序，则维护会变得更加容易：

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>
// 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-*
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);

在您发布的代码中，每个函数调用的参数以及链接文本本身，因此我认为这是出于演示目的，它们是相同的；如果这反映了您的用例，则可以使用ES6为事件处理功能定义默认值（尽管，如前所述，我认为这不适用于您的实际用例）：

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>
// 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);

还值得注意的是，以上内容在本机JavaScript中也很容易实现（最多并包括使用默认值，但请注意：我不认为使用相同的参数是有代表性的）：

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>
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)
});

参考文献：

相关问题
最新问题