У меня есть динамически сгенерированная таблица html и я пытаюсь выделить последнюю строку таблицы, а также удалить из нее гиперссылку. Я хочу достичь этого по идентификатору ID My_Table_1.
Я искал решение в Интернете и в Stack Overflow, но не мог приблизиться к тому, что ищу. Поэтому разместите его более подробно и подробно.
Ниже приведен HTML:
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 1</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">0</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">1</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">0</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 2</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">161</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">3</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">82</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Grand Total</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">162</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">4</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">83</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
Я пробовал под JavaScript просто для того, чтобы сделать последнюю строку жирным, но ее не работает:
#My_Table_1:tr:last-child {
font-weight: bold;
}
Я ценю любую помощь по этому поводу.
Удалить двоеточие (:
) перед tr
в селекторе. Чтобы удалить подчеркивание, вы должны настроить таргетинг на a
внутри last-child
и установить свойство text-decoration
и свойство pointer-events
равным none
.
Попробуйте следующее:
#My_Table_1 tr:last-child {
font-weight: bold;
}
#My_Table_1 tr:last-child a{
text-decoration: none;
pointer-events: none;
}
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 1</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">0</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">1</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">0</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 2</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">161</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">3</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">82</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Grand Total</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">162</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">4</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">83</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
Ваш селектор css не был прав (это :
избыточно).
#My_Table_1 tr
Выбирает все элементы <tr>
внутри #My_Table_1
Вы можете прочитать здесь, чтобы узнать, как правильно выбирать элементы.
#My_Table_1 tr:last-child { font-weight: bold; }
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 1</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">1</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">0</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">1</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">0</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Manager 2</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">161</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">3</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">82</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345"><a href="#">Grand Total</a></td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346"><a href="#">162</a></td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347"><a href="#">4</a></td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348"><a href="#">108</a></td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718"><a href="#">83</a></td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719"><a href="#">1292</a></td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>