今天在cognos中第一次需要用到JS，主要是报表页面展示的时候是可能得到如下的数据

，我需要对其中类型中有金额字样的，后面的数值，精确2位小数；有百分比字样的，数值显示成百分比。如下。

我先尝试了自己写一段HTML代码，对表格的数据进行格式化。

<html>
<head>
<script type="text/javascript">
function getInnerHTML()
{
alert(document.getElementById("mytable").innerHTML);
}

window.onload=function(){

formatMoney();

}

function formatMoney(){
var fisrTd = document.getElementsByTagName("td");
var i=0;
for(i=0;i<fisrTd.length;i=i+2){
if(fisrTd[i].innerHTML.indexOf("百分比")>=0){
alert(fisrTd[i].innerHTML)
fisrTd[i+1].innerHTML=accMul(fisrTd[i+1].innerHTML,100)+"%"
}
if(fisrTd[i].innerHTML.indexOf("金额")>=0){
alert(fisrTd[i].innerHTML)
fisrTd[i+1].innerHTML=outputmoney(fisrTd[i+1].innerHTML)
}

}

}

//乘法函数，用来得到精确的乘法结果
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用：accMul(arg1,arg2)
//返回值：arg1乘以 arg2的精确结果
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}

function outputmoney(number) {
number = number.replace(/,/g, "");
if(isNaN(number) || number == "")
return "";
number = Math.round(number * 100) / 100;
if (number < 0)
return '-' + outputdollars(Math.floor(Math.abs(number) - 0) + '') + outputcents(Math.abs(number) - 0);
else
return outputdollars(Math.floor(number - 0) + '') + outputcents(number - 0);
}
//格式化金额
function outputdollars(number) {
if (number.length <= 3)
return (number == '' ? '0' : number);
else {
var mod = number.length % 3;
var output = (mod == 0 ? '' : (number.substring(0, mod)));
for (i = 0; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod + 3 * i, mod + 3 * i + 3);
else
output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
}
function outputcents(amount) {
amount = Math.round(((amount) - Math.floor(amount)) * 100);
return (amount < 10 ? '.0' + amount : '.' + amount);
}

</script>
</head>
<body>

<table border="1" id="mytable">
<tr id="tr1">
<td >类型</td>
<td>数值</td>
</tr>
<tr id="tr2">
<td >金额</td>
<td>10.1</td>
</tr>
<tr id="tr3">
<td >人数</td>
<td>100</td>
</tr>
<tr id="tr4">
<td >百分比</td>
<td>1</td>
</tr>
<tr id="tr5">
<td >总金额</td>
<td>12.12563</td>
</tr>
</table>

<input type="button" onclick="getInnerHTML()"
value="Alert innerHTML of table row" />

</body>
</html>

然后在cognos中，先给TABLE嵌套一个DIV，然后通过DIV的ID，获取到表格，再根据用以上JS代码去实现我需要的功能：

<script type="text/javascript">

setTimeout(formatMoney,20)

function formatMoney(){
var tabObj = document.getElementById("div1");
var fisrTd = tabObj.firstChild.getElementsByTagName("td")
var i=0;
for(i=0;i<fisrTd.length;i=i+1){
if(fisrTd[i].innerHTML.indexOf("率")>=0){
//alert(fisrTd[i].innerText)
fisrTd[i+1].innerText=accMul(fisrTd[i+1].innerText,100)+"%"
}
if(fisrTd[i].innerHTML.indexOf("占比")>=0){
//alert(fisrTd[i].innerText)
fisrTd[i+1].innerText=accMul(fisrTd[i+1].innerText,100)+"%"
}

if(fisrTd[i].innerHTML.indexOf("额")>=0){
//alert(fisrTd[i].innerText)
fisrTd[i+1].innerText=outputmoney(fisrTd[i+1].innerText)
}

}

}

/* 乘法函数，用来得到精确的乘法结果
说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
调用：accMul(arg1,arg2)
返回值：arg1乘以 arg2的精确结果
*/
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}

function outputmoney(number) {
number = number.replace(/,/g, "");
if(isNaN(number) || number == "")return "";
number = Math.round(number * 100) / 100;
if (number < 0)
return '-' + outputdollars(Math.floor(Math.abs(number) - 0) + '') + outputcents(Math.abs(number) - 0);
else
return outputdollars(Math.floor(number - 0) + '') + outputcents(number - 0);
}
/*格式化金额
*/
function outputdollars(number) {
if (number.length <= 3)
return (number == '' ? '0' : number);
else {
var mod = number.length % 3;
var output = (mod == 0 ? '' : (number.substring(0, mod)));
for (i = 0; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod + 3 * i, mod + 3 * i + 3);
else
output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
}
return (output);
}
}
function outputcents(amount) {
amount = Math.round(((amount) - Math.floor(amount)) * 100);
return (amount < 10 ? '.0' + amount : '.' + amount);
}

</script>

JS代码格式化修改表格的数值的格式的更多相关文章

  1. JS代码格式化

    JS代码格式化也就是规范化,保留必要的换行和缩进使代码阅读起来更容易.团队协同工作时会有相应的标准,大家要保证统一的代码风格,这样在合并代码的时候才不容易出问题.通过快捷键Ctrl+Shift+F进行 ...

  2. JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...

  3. 利用Notepad++插件（JSToolNpp）：让JS代码格式化对齐

    http://www.ycyjkj.com/post-663.html 程序员或者正在学习的同学一般都会遇到一个问题,看别人的源码,只是一行,没有分开,让人看的很别扭,也可能是作者故意这样做的,也可以 ...

  4. 将一行很长的js代码格式化输出方便查看

    之前的一行js代码,有2万多字符,打开这个网址,粘贴到左边空白框,点下面格式化: 参考下面文章: 数千行的js代码变成了一行,如何复原,该换行的换行,该对齐的对齐_开发工具_小邯韩的博客-CSDN博客 ...

  5. JS代码格式化排版工具,web文本编辑器

    js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...

  6. 某平台实时数据录入js代码的修改坑点

    在隐形内嵌函数使用的时候,很容易把这一点忘记了:内嵌函数不能修改外部函数的变量和参数 使用了mysql存储过程实现数据计算,导致高并发的时候数据库挂掉 mysql最大连接数调整到16384 之前为10 ...

  7. JS代码格式化时间戳

    一.[24小时制]yyyy-MM-dd HH:mm:ss new Date().toJSON() // 2019-12-13T13:12:32.265Z 通过上面的方法,基本就可以将日期格式化,然后稍 ...

  8. 自动化测试-20.selenium常用JS代码执行

    前言: 在工作中有些控件定位不到,需要操作,使用JS代码去修改或者操作达到selenium不能做的操作. 1.Web界面的滑动 1 #coding:utf-8 2 from selenium impo ...

  9. 图片攻击-BMP图片中注入恶意JS代码 <转载>

    昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...

随机推荐

  1. Android Studio Gradle

    http://blog.zhaiyifan.cn/2016/03/14/android-new-project-from-0-p2/

  2. jenkins 状态管理

    如何安装Jenkins as rpm: $ sudo service jenkins restart Usage: /etc/init.d/jenkins {start|stop|status|res ...

  3. Android Studio 我常用快捷键

    0. Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类 1. 重载方法 Ctrl+O 2.Ctrl+shift+Enter:自动匹配相对应的语法结构,比如if,do-while,t ...

  4. [ASP.NET 技术点滴] Jquery 前端验证

    先上HTML代码: <form id="login" name="login" action="~/f_login/Login" me ...

  5. ti processor sdk linux am335x evm /bin/setup-host-check.sh hacking

    #!/bin/sh # # ti processor sdk linux am335x evm /bin/setup-host-check.sh hacking # 说明: # 本文主要对TI的sdk ...

  6. 海康、大华IpCamera RTSP地址和格式

    海康:rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream说明:username: 用户名.例如 ...

  7. cmd远程连接数据库

    在本地配置tnsname 打开C:\oracle\ora92\network\ADMIN\tnsnames.ora 加入如下参数. ora = (DESCRIPTION = (ADDRESS_LIST ...

  8. HTML5实现扫描识别二维码/生成二维码

    扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源.  2. 利用canvas使用相关算法分析图片识别图 ...

  9. 六款最佳Linux教育应用

    导读 对教育行业的用户来说,有好几款专门的Linux发行版是专门面向教育行业的.本文将介绍适合教育领域的几款顶级发行版. 1.Edubuntu 位居榜首的是Edubuntu.顾名思义,Edubuntu ...

  10. Android中利用画图类和线程画出闪烁的心形

                                                        本文讲解主要涉及的知识点: 1.线程控制 2.画图类 3.心形函数 大家先看图片: <ig ...