Javascript Таблица и числовой формат

Question

У меня есть простая таблица. Я пытаюсь изменить числовой формат моего второго последнего элемента td (где я получаю "SumPrices" в валюте, округленной до доллара. Кажется, я не могу понять синтаксис.

<table border="1" cellpadding="2" style="width: 25%;">
  <tbody> 
     <tr> 
        <th scope="col"> Fiscal </th> 
        <th scope="col"> Courses </th> 
        <th scope="col"> Cost </th> 
        <th scope="col"> Comment </th> 
     </tr> 
     <tr> 
        <td align="center"> 2019-20</td>
        <td align="center" id="Icount">252</td>
        <td align="center" id="SumPrices">323662</td>
        <td align="center"> Something </td>
     </tr>
  </tbody> 
</table> 

Answer 1

Предположительно, вы будете заполнять содержимое таблицы из источника? В момент вставки / манипулирования DOM происходит форматирование числа из источника данных в валюту. Скорее всего, вы сделаете это в javascript согласно вашему тегу вопроса.

т.е.

formattedNumber = format(dataSource)
td.innerText = formattedNumber

Пример:

let cost = document.querySelector("#SumPrices").innerHTML.trim();
/*casting to number*/
cost = +cost;

cost = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
}).format(cost);

document.querySelector("#SumPrices").innerHTML = cost;

<table border="1" cellpadding="2" style="width: 25%;">
  <tbody> 
     <tr> 
        <th scope="col"> Fiscal </th> 
        <th scope="col"> Courses </th> 
        <th scope="col"> Cost </th> 
        <th scope="col"> Comment </th> 
     </tr> 
     <tr> 
        <td align="center"> 2019-20</td>
        <td align="center" id="Icount">252</td>
        <td align="center" id="SumPrices">323662</td>
        <td align="center"> Something </td>
     </tr>
  </tbody> 
</table> 

Множество способов отформатировать ваш номер, вы можете использовать регулярное выражение, как предложено Sajeeb. Вы также можете использовать Intl.NumberFormatted. Документы MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Отличное руководство по использованию этой валюты здесь: https://flaviocopes.com/how-to-format-number-as-currency-javascript/

Это полезно?

Answer 2

Вы можете использовать toFixed(precision) и regex для форматирования валюты.

const td = document.querySelector("#SumPrices");
let price = parseInt(td.innerText);

price = price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');

td.innerText = '$ ' + price;

table {
	width: 100% !important;
}

<table border="1" cellpadding="2" style="width: 25%;">
  <tbody> 
     <tr> 
        <th scope="col"> Fiscal </th> 
        <th scope="col"> Courses </th> 
        <th scope="col"> Cost </th> 
        <th scope="col"> Comment </th> 
     </tr> 
     <tr> 
        <td align="center"> 2019-20</td>
        <td align="center" id="Icount">252</td>
        <td align="center" id="SumPrices">323662</td>
        <td align="center"> Something </td>
     </tr>
  </tbody> 
</table>