CODEWITHSUNDEEP
javascriptjqueryhtml
Raman Singh
Raman Singh

Reputation: 161

color all tr element inside table if td is clicked using Jquery

I having table trying to color all tr element using jQuery when it called from any child td element. Here is my code.

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

Because I want to highlight the clicked one(already have code), rest I want to reset to previous background color.. that's y

Any suggestions?

Upvotes: 1

Views: 499

Answers (3)

David Thomas
David Thomas

Reputation: 253308

While you've already accepted an answer for this question, I felt it worth pointing out some of the problems with your initial approach; while the <tbody> element is optional when writing HTML the browser, when constructing the DOM, will routinely create that element — if it doesn't already exist — and place the <tr> elements within it; therefore the line:

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

was first finding all ancestor <table> elements (in the event of nested <table> elements this could be itself a problem) and then finding the children() elements, which would be the <tbody> elements.

Ordinarily this would still allow the colour to show 'through' the <tr> and <td> elements, but in this case you've assigned a background-color to the <tr> elements, which prevents the <tbody> background from showing.

So there are two alternatives:

  1. Define the <tbody> element when composing the HTML, and specify the background-color on that <tbody> element:

        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>

Note, above, that along with placing the background-color on the <tbody> element I also removed that property from the <tr> elements. In the event of alternative styling specifying the background-color you may also need to add the property background-color: inherit; on the <tr> and/or <td> elements.

  1. Alternatively you could, instead, navigate from the element to the closest <tbody> element, then find its children — the <tr> elements — and specify their background-color as you intended:

        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>

Further, it's worth pointing out that in place of the style attributes you should instead use a stylesheet in order to more easily maintain and update the styles of your resulting website which also has the benefit of simplifying the 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>

You're also using obtrusive JavaScript to bind the event-handling for your links, which again requires more care and attention to be paid on updating the document; if, instead, you use JavaScript to bind the event-handlers then maintenance becomes easier:

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

The above event-binding required the use of an anonymous function to call the named function, since there's no source from which the arguments could be retrieved on the element itself; however if data-* custom attributes could be used to retrieve the arguments, then the named function could be used instead:

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>

In your posted code the arguments to each function call — as well as the link-text itself, so I assume this was for demo purposes — were the same; if this reflects your use-case you can, with ES6, define default values to the event-handling function (though, as noted, I don't believe this is applicable to your real use-case):

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

It's also worth noting that the above is also simple to implement in native JavaScript (up to, and including, the use of default-values, but as noted: I don't believe that the use of the same arguments is representative):

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>

In the event that your (user's) browser may not support arrow functions, this can be rewritten using a typical anonymous function:

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>

References:

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Try with .find() to get the descendants of each element in the current set of matched elements in the following way:

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>

Upvotes: 1

Mr. Roshan
Mr. Roshan

Reputation: 1805

Try this:- Use find() function instead of children() function.

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

Upvotes: 1

Related Questions