Question

＆＃13;

table, td, th {
    border: 1px solid black;
}

table {
    width: 100%;
}

th {
    height: 50px;
}

td:last-child {
   text-align: right;
}

＆＃13;

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

＆＃13;

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

非常感谢。

Answer 1

您可以执行以下操作：

＆＃13;

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

＆＃13;

table, td, th {
    border: 1px solid black;
}

table {
    width: 100%;
}

th {
    height: 50px;
}

＆＃13;

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

＆＃13;

没有jQuery

＆＃13;

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

＆＃13;

table,
td,
th {
  border: 1px solid black;
}

table {
  width: 100%;
}

th {
  height: 50px;
}

＆＃13;

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

＆＃13;

Answer 2

使用纯JavaScript，您可以遍历所有<th>并找到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>

使用JavaScript根据子级div文本选择Parent的Element属性

2 个答案: