1

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

I searched for solution 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 below JavaScript just to try making last row bold, but its not working:

#My_Table_1:tr:last-child {
  font-weight: bold;
}
Daniel Widdis
  • 7,156
  • 9
  • 34
  • 57
Richa
  • 315
  • 4
  • 15

2 Answers2

2

Your css selector wasn't right (the : is redundant).

#My_Table_1 tr Selects all <tr> elements inside #My_Table_1

You can read in here to learn how to select elements in the right way.

#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>
omri_saadon
  • 9,513
  • 6
  • 31
  • 58
1

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>
Mamun
  • 62,450
  • 9
  • 45
  • 52
  • Thank you so much for quick response and help. I highly appreciate your help and time. – Richa Oct 29 '18 at 16:28
  • I tried below code `#My_Table_1 tr:last-child a{ text-decoration: none; }` and its not working. I was able to make it bold but unable to remove hyperlink – Richa Oct 29 '18 at 16:32
  • @Richa, is it working as you expect in the answer here? if yes, I guess css may be overridden in your actual environment. – Mamun Oct 29 '18 at 16:34
  • Thanks for the response. I also clicked on "Run code snippet" on stack overflow but still I can see and click on last row. It shows as hyperlink. Please correct me if am doing something wrong here. Sorry – Richa Oct 29 '18 at 16:40
  • @Richa, which browser you are using? – Mamun Oct 29 '18 at 16:41
  • Hi @Mamun, I think I fixed the issue by using method mentioned [here](https://stackoverflow.com/questions/5376444/how-do-i-disable-a-href-link-in-javascript). I tried below code `#My_Table_1 tr:last-child a{ pointer-events: none !important; }` and its working fine. – Richa Oct 29 '18 at 16:46
  • @Richa, that's great. I thought you just wanted to remove the underline. To disable the click event you have to use `pointer-events`....I will update the answer....thanks. – Mamun Oct 29 '18 at 16:51