获取table的值，将第四列的数字保留两位小数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四列保留两位小数</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<style>
    .hidden{
        display: none;
    }
</style>
<table cellpadding="0" rules="all" border="1" style="width: 100%; border-collapse: collapse;"
       id="dataTable">
    <tr>
        <td scope="col" title="列1">
            列1
        </td>
        <td scope="col" title="列2">
            列2
        </td>
        <td scope="col" title="列3" class="hidden">
            隐藏的列3
        </td>
        <td scope="col" title="列4">
            列4单价
        </td>
    </tr>
    <tr>
        <td title="15.90833">
            15.90833
        </td>
        <td title="8.403333">
            8.403333
        </td>
        <td title="8.403333" class="hidden">
            2.333333
        </td>
        <td title="10.165">
            10.165
        </td>
    </tr>
    <tr>
        <td title="17.26667">
            17.26667
        </td>
        <td title="">2.4345
        </td>
        <td title="8.403333" class="hidden">
            2.333333
        </td>
        <td title="7.656667">
            7.656667
        </td>
    </tr>
    <tr>
        <td title="17.26667">
            17.26667
        </td>
        <td title="">2.4345
        </td>
        <td title="8.403333" class="hidden">
            2.333333
        </td>
        <td title="7.656667">
            7.656667
        </td>
    </tr>
    <tr>
        <td title="17">
            17
        </td>
        <td title="9.41">
            9.41
        </td>
        <td title="8.403333" class="hidden">
            2.333333
        </td>
        <td title="0.0043">
           9
        </td>
    </tr>
</table>
<script>
    $("#dataTable tr:gt(0)").each(function(index, element) {
        var a = $(element).children();//$(element)代表每行tr，后面的children代表tr下面的td，a即这一行所有td的集合
        var num = parseFloat(a.eq(3).text());// 取得index为 3的td里面的文本
        var newNum = num.toFixed(2);
        a.eq(3).text(newNum);
    });
</script>
</body>
</html>

结果如图
在这里插入图片描述
第四列保留两位小数，关键在于
第一步，获取除了第一行的所有行tr，
第二步，获取每一行中第四个td的值
第三步，化为浮点数后取舍toFixed

获取table的值，将第四列的数字保留两位小数

猜你喜欢