append $ 在 html 表中 jquery 中的特定列

Question

我有一個 html 表 tbl1 我有 3 列在 json 響應中生成。 ID 計數和值。我想在 tbody 的值列中 append $

 $('#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

無需循環

您不能添加到字符串

這里我使用的是文本 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>

或使用 CSS內容

Answer 2

無需為此使用javascript或jquery 。 您可以通過添加簡單的 CSS 來實現，如下所示：

 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

您可以按如下方式使用text(function)方法：

 $('#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>