如何为特定列上的每个 table 单元格使用 Jquery Mask Money？

Question

我想在特定列的每个 table 单元格内实现 Jquery Mask Money。下面是我想要实现的代码：

HTML Table代码


<script src="js/jquery.maskMoney.js"></script>

  <div class="container">
  <table id="users_data" class="table table-striped table-bordered" >
  <tr>
    <th>Name</th>
    <th>product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Beer</td>
    <td ><input type="text" id="price" value="94"></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Bread</td>
    <td ><input type="text" id="price" value="34"></td>
  </tr>
</table>
  </div>

<script>
  $('#users_data tr').each(function() {

 $("#price").maskMoney({prefix:'R$ ', allowNegative: false, thousands:'.', decimal:',', affixesStay: true});

});
  </script>

上面的代码显示 table 和各自的数据，但 MaskMoney 插件只在第一个单元格内工作。我尝试 jquery each.() 函数来执行此操作但没有响应。在这种情况下，我该如何改进我的代码来解决这个问题？谢谢

Answer 1

使用 jQuery 选择器 # 表示 id。页面上只能有一个具有该 id 值的控件。因此，您要么需要具有独特的 id，要么使用 class 属性。 Class 属性通常是要走的路。

 <tr>
     <td>Jill</td>
     <td>Beer</td>
     <td ><input type="text" id="price-1" class="price" value="94"></td>
 </tr>
 <tr>
     <td>Eve</td>
     <td>Bread</td>
     <td ><input type="text" id="price-2" class="price" value="34"></td>
 </tr>

并且对于您的 js $("#price") 只是更改为 $(".price")，因为 . 告诉 jQuery 查找具有名为 class 属性的控件 'price'.

如何为特定列上的每个 table 单元格使用 Jquery Mask Money？

How to use Jquery Mask Money for each table cell on specific column?

html

jquery

html-table

mask