javascript - 使用 JavaScript 根据子元素的 div 文本选择父元素属性

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>

我需要的是，如果表格标题是 Savings，那么我需要使用 css 属性选择器将 idx=2 作为目标，例如 table th[idx="2"] {text- align: right; 但这里的问题是标题值是可变的。这个值，即标题中的 Savings 可以在标题中的任何位置，因此我需要根据这些值进行选择。任何基于 CSS 的解决方案？ 如果不是来自 CSS，那么可能是 JavaScript？

非常感谢。

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

---

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