append $ in html table in specific column in jquery

Question

I have a html table tbl1 I have 3 column which is generated in json response. ID count and value.I want to append $ in value column in tbody

 $('#tbl1 tbody tr').each(function(){ console.log($('td:nth-child(3)').text().prepend('$')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl1"> <thead> <tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th> </tr> </thead> <tbody> <tr> <td>Proposal Submitted</td> <td>61</td> <td>25818992</td> // $25818992 </tr> <tr> <td>Total</td> <td>61</td> <td>25818992</td> //$25818992 </tr> </tbody> </table>

Answer 1

No need to loop

You cannot prepend to a string

Here I am using the text function

 $('#tbl1 tbody tr td:nth-child(3)').text(function() { return '$'+this.textContent });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl1"> <thead> <tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th> </tr> </thead> <tbody> <tr> <td>Proposal Submitted</td> <td>61</td> <td>25818992</td> <!-- $25818992 --> </tr> <tr> <td>Total</td> <td>61</td> <td>25818992</td> <!-- $25818992 --> </tr> </tbody> </table>

or use CSS content

Answer 2

No need to use javascript or jquery for that. You can achieve that by adding simple CSS like this:

 td.dollar:before { content: "$"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl1"> <thead> <tr class="hidden1"> <th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th> </tr> </thead> <tbody> <tr> <td>Proposal Submitted</td> <td>61</td> <td class="dollar">25818992</td> </tr> <tr> <td>Total</td> <td>61</td> <td class="dollar">25818992</td> </tr> </tbody> </table>

Answer 3

You can use the text(function) method as follows:

 $('#tbl1 tbody tr td:nth-child(3)').text(function() { return '$' + $(this).text(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl1"> <thead> <tr class="hidden1"><th data-style="Header" style="background-color: #66cdf2; color: #000">Opportunity</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Count</th> <th data-style="Header" style="background-color: #66cdf2; color: #000">Pipeline Value</th> </tr> </thead> <tbody> <tr> <td>Proposal Submitted</td> <td>61</td> <td>25818992</td> // $25818992 </tr> <tr> <td>Total</td> <td>61</td> <td>25818992</td> //$25818992 </tr> </tbody> </table>