Select Parent's Element attribute based on child's div text using JavaScript

Question

table, td, th {
    border: 1px solid black;
}

table {
    width: 100%;
}

th {
    height: 50px;
}

td:last-child {
   text-align: right;
}

<table>
  <tr>
    <th idx="0"><div>Firstname</div></th>
    <th idx="1"><div>Lastname</div></th>
    <th idx="2"><div>Savings</div></th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

What I need is, if the table heading is Savings then I need to target the idx=2 using css attribute selector like table th[idx="2"] {text-align: right;} but the problem here is the heading values are variable. This value i.e. Savings in the heading can be anywhere in the header so I need to select based on the values. Any solutions based on CSS? If not from CSS then possibly JavaScript?

Many thanks.

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — amitdigga, Apr 13 '18 at 15:15
The above question is purely based in css. I am also looking answers from JavaScript as well if possible. — Athar K, Apr 13 '18 at 15:17
You only want to make Savings hearing align right or whole column? — Eddie, Apr 13 '18 at 15:20
I need to apply this on the th where there is a Savings value. So the whole column HEADING. — Athar K, Apr 13 '18 at 15:21

Eddie · Answer 1 · 2018-04-13T15:53:15.763

You can do something like:

//Find the 'Savings' position
//Note +1 because index counts from 0. While nth-child counts from 1
let SnthChild = $('table th').filter(function() {return $(this).text().trim() === 'Savings'}).index() + 1;

//Assign nth-child css
$('table tr th:nth-child(' + SnthChild + ')').css('text-align', 'right');
$("table tr td:nth-child(" + SnthChild + ")").css('text-align', 'right');

table, td, th {
    border: 1px solid black;
}

table {
    width: 100%;
}

th {
    height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th idx="0">
      <div>Firstname</div>
    </th>
    <th idx="1">
      <div>Lastname</div>
    </th>
    <th idx="2">
      <div>Savings</div>
    </th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

Without jQuery

let savingIdx = 0;
[...document.querySelectorAll('table th')].forEach(function(e, i) {
  if (e.innerText.trim() === 'Savings') savingIdx = i + 1;
});

document.querySelectorAll('table tr th:nth-child(' + savingIdx + ')')[0].style.textAlign = "right";
[...document.querySelectorAll('table tr td:nth-child(' + savingIdx + ')')].forEach(function(e, i) {
  e.style.textAlign = "right";
});

table,
td,
th {
  border: 1px solid black;
}

table {
  width: 100%;
}

th {
  height: 50px;
}

<table>
  <tr>
    <th idx="0">
      <div>Firstname</div>
    </th>
    <th idx="1">
      <div>Lastname</div>
    </th>
    <th idx="2">
      <div>Savings</div>
    </th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

Ahsan Ali · Accepted Answer · 2018-04-13T17:26:52.840

Using pure JavaScript, you can loop through all <th> and find the Savings column.

var table = document.querySelectorAll('table th');
table.forEach(function (e) {
  if (e.innerText.trim() == 'Savings') {
    e.style.textAlign = 'right';
  }
});

var table = document.querySelectorAll('table th');
table.forEach(function (e) {
  if (e.innerText.trim() == 'Savings') {
    e.style.textAlign = 'right';
  }
});

table, td, th {
  border: 1px solid black;
}

table {
  width: 100%;
}

th {
  height: 50px;
}

td:last-child {
  text-align: right;
}

<!DOCTYPE html>
<html lang="en">
<body>
<table>
    <tr>
        <th idx="0"><div>Firstname</div></th>
        <th idx="1"><div>Lastname</div></th>
        <th idx="2"><div>Savings</div></th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
    </tr>
    <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
    </tr>
</table>
</body>
</html>

What if there are other divs as well other than this Savings div inside th? — Athar K, Apr 13 '18 at 18:05
For this case you can use the following condition `if(e.innerText.trim().indexOf('Savings') != -1) { e.style.textAlign = 'right'; }` — Ahsan Ali, Apr 13 '18 at 18:49

Select Parent's Element attribute based on child's div text using JavaScript

2 Answers2