Question

我想打印一个以逗号作为分隔符的整数，例如10,234,234 在价格列中。我已经完成了该功能，但是对于如何在表中进行设置却有些困惑。下面是我的代码

 <table class="table">
     <tr>
      <th> Item</th>
      <th>Price</th>
     </tr>
      @foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
      {
         <tr>
           <td> @Html.DisplayFor(modelitem => item.itemName) </td>
           <td> @Html.DisplayFor(modelitem => item.itemPrice)</td>
         </tr>
      }
      <tr>
          <td></td>
            <td> @Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { @class = "form-control", @onchange = "validationCheck();", @readonly = "readonly" } }) </td>
      </tr>
 </table>
 <script>
    function numberSeparator(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
 </script>

Answer 1

您需要获取表中的所有第二个td元素，然后使用代码更新内容。

<table class="table" id="table">
<!-- set id to get table^^^^^^^^---->
     <tr>
      <th> Item</th>
      <th>Price</th>
     </tr>
      @foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
      {
         <tr>
           <td> @Html.DisplayFor(modelitem => item.itemName) </td>
           <td> @Html.DisplayFor(modelitem => item.itemPrice)</td>
         </tr>
      }
 </table>
 <script>
    function numberSeparator(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    // get all second tds
    [...document.querySelectorAll('#table tr > td:nth-child(2)')].forEach(e => {
        // get text content and update
        e.textContent =  numberSeparator(e.textContent.trim());
    })
 </script>

仅供参考：最好尽可能从后端进行操作。您的后端框架/编程语言中可能有一些可用功能。

更新：：在更新的代码中，您正在创建输入，以便获取输入元素的更新值。

<table class="table">
     <tr>
      <th> Item</th>
      <th>Price</th>
     </tr>
      @foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
      {
         <tr>
           <td> @Html.DisplayFor(modelitem => item.itemName) </td>
           <td> @Html.DisplayFor(modelitem => item.itemPrice)</td>
         </tr>
      }
      <tr>
          <td></td>
            <td> @Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { @class = "form-control", @onchange = "validationCheck();", @readonly = "readonly" } }) </td>
      </tr>
 </table>
 <script>
   function numberSeparator(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    // get all second tds
    [...document.querySelectorAll('#table tr > td:nth-child(2) input')].forEach(e => {
        // get text content and update
        e.value =  numberSeparator(e.value.trim());
    })
 </script>

Answer 2

您可以使用toLocaleString显示带有逗号分隔符的数字

let num = 1000000
let display = num.toLocaleString('us-US')
console.log(display)   // 1,000,000

我怀疑您的代码可以像这样

@foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
  {
     <tr>
       <td> @Html.DisplayFor(modelitem => item.itemName) </td>
       <td> @Html.DisplayFor(modelitem => item.itemPrice.toLocaleString('us-US'))</td>
     </tr>
  }

javascript-如何用逗号将数字制成表格中的千位分隔符

2 个答案: