JS代码格式化修改表格的数值的格式

最新推荐文章于 2022-10-14 13:53:24 发布
最新推荐文章于 2022-10-14 13:53:24 发布
阅读量253 收藏
点赞数
文章标签： javascript ViewUI

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

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

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

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

window.οnlοad=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" οnclick="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>

 

weixin_33686714
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui使用templet格式化表格数据的方法
12-13
/*———————格式化时间开始————————–*/ //对Date的扩展，将 Date 转化为指定格式的String //月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， //年(y)可以用 1-4 个占位符，毫秒...
前端ExcelJS设置某一列的数字格式
qq_57956183的博客
06-05 1825
当前端要导出表格时需要设置时间或者重量以及金钱的数字格式，可以运用worksheet.getColumn('需要进行格式转换的列数').numFmt来进行数字的格式转换，具体的格式也可以参考下图中的单元格格式中的数字格式。
使用js实现，仿Excel ，数字格式化
Aren的博客
03-30 610
主要要实现四个符号 “#”：数字占位符。只显有意义的零而不显示无意义的零。小数点后数字如大于”#”的数量，则按”#”的位数四舍五入。 ”0”：数字占位符。如果单元格的内容大于占位符，则显示实际数字，如果小于点位符的数量，则用0补足。 ”.”：小数点 ”，”：千位分隔符 后来因为业务调整，千分位符不用实现了，见三个就打逗号， 0 和# 差不多也一并处理了，小数点，作为核心 ，直...
html 格式化金额显示
生活中的思索
08-24 5457
不废话直接上代码 //格式化金额显示,s为金额数字，n为精确小数位 function fmoney(s, n) { n = n &gt; 0 &amp;&amp; n &lt;= 20 ? n : 2; s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.sp...
js格式化列表数据的方法
正一品程序员的博客
12-30 778
/** * 格式化列表的方法 */ export function treeToList( tree = [], idValue = null, childrenField = 'children', idField = 'menuId', parentIdField = 'parentId', ) { const list = [] if (!childrenField) childrenField = 'children' for (let i = 0, j = tr
JavaScript网页特效范例宝典源码
09-04
7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 ...
JSP动态网页制作基础培训教程源代码.rar
06-15
此部分是指第10章（表10）和第11章（表11）的内容，包含实例的后台数据库建立和初始化脚本，以及实例的页面代码等，下面分别介绍。 第10章源代码使用说明 操作步骤如下： 1．建立后台SQL Server数据库。读者应该...
JavaScript笔记
09-28
可以使用任何文本编辑工具编写 JavaScript 代码，然后由浏览器解释执行。 JavaScript常用于实现如下功能： |--控制文档的外观和内容； |--对浏览器的控制； |--与 HTML 表单的交互； |--与用户的交互； |--...
如何使用js 打开并设置excel某些单元格的格式例子
02-23
一个用js写的打开excel并设置某些行excel格式的小例子
javascript操作excel知识点
batey520的专栏
10-30 219
使用JavaScript中的ActiveXObject填充并设置Excel格式 1创建 var XLObj = new ActiveXObject("Excel.Application" ); var xlBook = XLObj.Workbooks.Add; //新增工作簿 var ExcelSheet = xlBook.Worksheets(1); //创建工作表 2...
原生js 实现table表格
逆风优雅的博客
08-04 3059
首先: 定义一个表头(改表头的作用是，固定表头的展示，不至于tabody数据过多时，页面滚动导致表格头部滚动)需要注意的是，两个colgroup的col定义的宽度要一致，这样才可以实现表格的宽度自适应。...
JS操作表格样式汇总
崔向阳@李晓的博客
09-19 1688
在HTML界面开发中，经常会遇见JS对TABLE表格的操作，下面针对几种经常性的操作进行汇总： 第一：JS动态增加表格行数据 在body中定义一个空的Table <div id="detail" class="sub-title4" align="left"> <table id="tb_cxy"> </ta...
使用js将html格式的table =＞ excel格式文件
weixin_40944062的博客
07-23 330
将html格式的表格导出为excel表格文件 先下载辅助模块. 将辅助模块导入到目标html页面 利用DOM操作, 获取目标表格的内容. 使用辅助模块的功能, 将内容保存为表格文件. 下载辅助模块 这里我使用的是fileSaver, 地址为: https://github.com/kebingzao/fileSaver_excel 下载js(Blob、FileSaver)文件, 放进你的项目目录: - ## 将辅助模块导入到目标html页面 - ## 利用DOM操作获取表格
javascript动态添加表格行和单元格，并设置样式
学习专栏
06-20 7416
var objTable=document.getElementById("tableDateG"); //获得table的对象 var Rows=objTable.rows.length;   tr=objTable.insertRow();   //添加行  tr.style.backgroundColor="#FFFFFF"  ；//设置行的背景色  td=tr.insertCell()
sheetjs如何设置导出的单元格格式为文本
qq_36140649的博客
10-14 3223
sheetjs如何设置导出的单元格格式为文本
javascript格式化table标签内容
weixin_30706507的博客
07-12 160
项目中遇到这样的需求，一大段文章正文的html代码在手机中显示不全，原因是由于其它有table，而table表格中的tr/td都携带了从word中粘贴过来的样式，需要将这一大段的字符串中的table、tr、td中携带的样式清除掉，同时还不能破坏table结构，即要保留tr中的rowspan和td中的colspan属性。html部分代码如下：<pclass="MsoNormal"...
python js代码格式化
最新发布
07-09
1. Prettier：Prettier是一个流行的JavaScript代码格式化工具，它可以为你的代码添加适当的缩进、空格和换行符。你可以使用npm安装Prettier，并在命令行中运行它来格式化代码。 2. ESLint：ESLint是一个广泛使用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值