logo标签列表

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

javascripthtmlcss
4

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 的解决方案吗？如果没有，则可能需要使用 JavaScript。谢谢。
2
可能是是否有CSS父选择器？的重复问题。 - amitdigga
以上问题纯粹基于CSS。如果可能的话，我也希望能从JavaScript中得到答案。 - Athar K
所以在它被关闭之前，编辑你的问题。 - Temani Afif
你只想让储蓄听到右对齐或整个列吗？ - Eddie
我需要将此应用于具有储蓄值的th。因此整个列标题。 - Athar K
2个回答
2
您可以像这样做：

您可以这样操作：

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

1
使用纯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>

如果在th标签内除了这个储蓄div之外还有其他的div呢？ - Athar K
对于此情况，您可以使用以下条件:if(e.innerText.trim().indexOf('Savings') != -1) { e.style.textAlign = 'right'; } - Ahsan Ali
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接