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

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

0 голосов
/ 29 октября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Удалить двоеточие (:) перед 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 голосов
/ 29 октября 2018

Ваш селектор 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...