All geek questions in one place

Select parent attribute based on text of child div using javascript

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>
Run codeHide result

I need if the title of the Savings table , then I need to target idx = 2 using the css attribute selector, for example table th[idx="2"] {text-align: right;}, but the problem here is the header values ​​are variable. This value, that is, the savings in the header can be anywhere in the header, so I need to choose based on the values. Any CSS based solutions? If not from CSS, maybe JavaScript ?

Many thanks.

+4
source share
2 answers

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

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>
Run codeHide result
+1

- :

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

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>
Hide result
+2

Source: https://habr.com/ru/post/1696161/

More articles:


All Articles