javascript - 使用 jquery(或 vanilla JS)在页面加载时格式化表格中的数字

Question

我有一张包含数字的表格，希望每千个数字的格式正确，1000 = 1,000。

我试着用 jquery 来做。

我的 table

<td class="sorting_1">373432</td>

我的 jquery 代码不起作用

$(".sorting_1").ready.replaceWith(function(x){
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

我的原版 JS 代码:

var s1 = document.getElementsByClassName("sorting_1");
window.onload = function formatNumber(s1) {
  return s1.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');  
}

表的输出应该从 373432 变为 373,432

Answer 1

不确定您从哪里获得现成的语法，但这似乎是错误的，并且 replaceWith 将替换该元素。您只需要交换文本。

$( document ).ready(function() {
  $(".sorting_1").text(function(i, text){ 
    return Number(text).toLocaleString()
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="sorting_1">373432</td>
    <td class="sorting_1">12345</td>
    <td class="sorting_1">123456</td>
  </tr>
</table>

没有 jQuery

window.addEventListener("load", function () {
  document.querySelectorAll(".sorting_1").forEach( function (td) {
    td.textContent = Number(td.textContent).toLocaleString();
  })
});

<table>
  <tr>
    <td class="sorting_1">373432</td>
    <td class="sorting_1">12345</td>
    <td class="sorting_1">123456</td>
  </tr>
</table>