在jquery中的特定列中追加html表中的$

Question

我有一个html表tbl1，我有3列，它是在json响应中生成的。ID计数和值。我想在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

无需循环

您不能在字符串之前

这里我使用的是文本功能

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