美文网首页
JS控制数字小数位数

JS控制数字小数位数

作者: 过桥 | 来源:发表于2015-09-11 14:38 被阅读677次

    示例代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>脚本操作表格中列数据保留小数</title>
    
        <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
        <script type="text/javascript">
        function decimalDigits(){
            /*
            得到规则
            名为列1的列,保留一位小数
            名为列2的列,保留两位小数
            名为列3的列,保留三位小数
            */
            var rule = "列1,1|列2,2|列3,3";
        
             var flag = rule.split('|');
             for(var i=0;i<flag.length;i++)
             {
                 var columnName = flag[i].split(',')[0];
                 var decimalLength = flag[i].split(',')[1];
                 
                 if($("td:contains('"+columnName+"')")[0] != null)
                 {
                    //得到列的索引
                    var columnIndex = $("td:contains('"+columnName+"')")[0].cellIndex + 1;
                
                    //如果有很多表格,可以通过 表ID 定位到表,如下行注释代码
                    //$("table[id='dataTable'] tr:not(:first) td:nth-child("+columnIndex+")").each(function(){
                    $("table tr:not(:first) td:nth-child("+columnIndex+")").each(function(){
                        var flag = parseFloat($(this)[0].innerText).toFixed(decimalLength);
                        //操作成功后,显示保留小数后的数据
                        if(flag != "NaN")
                        {
                            $(this).html(flag);
                        }
                    });
                }
            }
        }
        </script>
    
    </head>
    <body onload="decimalDigits();">
        <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">
                    列3
                </td>
            </tr>
            <tr>
                <td title="15.90833">
                    15.90833
                </td>
                <td title="8.403333">
                    8.403333
                </td>
                <td title="10.165">
                    10.165
                </td>
            </tr>
            <tr>
                <td title="17.26667">
                    17.26667
                </td>
                <td title="">
                </td>
                <td title="7.656667">
                    7.656667
                </td>
            </tr>
            <tr>
                <td title="17">
                    17
                </td>
                <td title="9.41">
                    9.41
                </td>
                <td title="0.0043">
                    0.0043
                </td>
            </tr>
        </table>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:JS控制数字小数位数

          本文链接:https://www.haomeiwen.com/subject/dippcttx.html