JavaScript or jQuery to bold last row of a table and remove hyperlink. Table with ID "My_Table_1"

Am having a dynamically generated html table and am trying to bold the last row of a table and also to remove hyperlinks from it. I want to achieve this by identifying ID My_Table_1.

I searched for solutions on the internet and on Stack Overflow but couldn't get any closer to what am looking for. Hence posting it with more details and specifics.

Below is the 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>

I tried the below JavaScript just to try to make last row bold, but it's not working:

#My_Table_1:tr:last-child {
  font-weight: bold;
}

Solution

Remove colon (:) before the tr in the selector. To remove the underline you have to target the a inside the last-child and set text-decoration and pointer-events property to none.

Try the following:

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