JavaScript или jQuery для выделения жирным шрифтом последней строки таблицы и удаления гиперссылки. Таблица с идентификатором «My_Table_1»

1

У меня есть динамически сгенерированная таблица 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;
}

Я ценю любую помощь по этому поводу.

Теги:
html-table
id

2 ответа

1
Лучший ответ

Удалить двоеточие (:) перед 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>
  • 0
    Большое спасибо за быстрый ответ и помощь. Я высоко ценю вашу помощь и время.
  • 0
    @ Рича, пожалуйста. Рад помочь :)
Показать ещё 7 комментариев
2

Ваш селектор 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>
  • 0
    Большое спасибо за быстрый ответ. Я очень ценю вашу помощь и время.
  • 0
    Пожалуйста, удачи, мой друг!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню