Как применить функции JavaScript к таблице HTML по классам, чтобы показать 2 десятичных знака? JavaScript должен быть применен к определенному классу таблицы HTML "sal".
В таблице по умолчанию будут данные из других источников в 4, 5 или 6 десятичных разрядах, которые мне нужно вывести как 2 десятичных знака.
<html>
<head>
<script>
function myFunction() {
var num = document.getElementById("sal");
var n = num.toFixed(2);
document.getElementById("sal") = n;
}
onload = myFunction()
</script>
</head>
<body>
<table class="tg" border=2px;>
<thead>
<tr>
<th class="tg-hdr1">NAME</th>
<th class="tg-hdr2">SALARY</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-namehead">Andrew</td>
<td class="tg-sal">211785.678489</td>
</tr>
<tr>
<td class="tg-namehead">Pete</td>
<td class="tg-sal">525225.7789</td>
</tr>
<tr>
<td class="tg-namehead">Jack</td>
<td class="tg-sal">98958.489</td>
</tr>
</tbody>
</body>
</html>
Вы можете выбрать элементы документа по имени класса, используяdocument.getElementsByClassName(className)
.
var salaries = document.getElementsByClassName("tg-sal");
for (i = 0; i < salaries.length; i++) {
var currentValue = salaries[i].innerHTML;
var newValue = currentValue.substring(0, currentValue.indexOf(".") + 2);
salaries[i].innerHTML = newValue;
}
Краткое решение с использованием Number.prototype.toFixed(2)
:
document.querySelectorAll('.tg-sal').forEach((e)=>{
e.innerText = Number(e.innerText).toFixed(2);
})
<table class="tg" border=2px;>
<thead>
<tr>
<th class="tg-hdr1">NAME</th>
<th class="tg-hdr2">SALARY</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-namehead">Andrew</td>
<td class="tg-sal">211785.678489</td>
</tr>
<tr>
<td class="tg-namehead">Pete</td>
<td class="tg-sal">525225.7789</td>
</tr>
<tr>
<td class="tg-namehead">Jack</td>
<td class="tg-sal">98958.489</td>
</tr>
</tbody>
</table>