js同一页面两个表格table数据显示冲突

使用js写两个表格时候数据冲突了，只能显示一个表的数据，另一个只能显示表的字段，如下图

代码是这样的：

 window.onload = function () {var tbody = document.getElementById('tbMain');{var per = [{id: 2020, change_num_bk: 'NaN', change_num_hg: 'NaN', change_num_lq: 'NaN'},{id: 2021,change_num_bk: judge(bkl1) + bkl1.toFixed(4) * 100 + '%' + '(' + judge(bkl11) + bkl11 + ')',change_num_hg: judge(bkl3) + bkl3.toFixed(4) * 100 + '%' + '(' + judge(bkl33) + bkl33 + ')',change_num_lq: judge(bkl5) + bkl5.toFixed(4) * 100 + '%' + '(' + judge(bkl55) + bkl55 + ')'},{id: 2022,change_num_bk: judge(bkl2) + bkl2.toFixed(3) * 100 + '%' + '(' + judge(bkl22) + bkl22 + ')',change_num_hg: judge(bkl4) + bkl4.toFixed(4) * 100 + '%' + '(' + judge(bkl44) + bkl44 + ')',change_num_lq: judge(bkl6) + bkl6.toFixed(4) * 100 + '%' + '(' + judge(bkl66) + bkl66 + ')'},];console.log("看这：", tableData[0][0])for (var i = 0; i < per.length; i++) { //遍历一下json数据var trow = getDataRow(per[i]); //定义一个方法,返回tr数据tbody.appendChild(trow);}}
window.onload = function () {var tbody2 = document.getElementById('tbMain2'){var per = [{id: 2020, change_num_985: tableData[0][0], change_num_211: 'NaN', change_num_syl: 'NaN'},{id: 2021, change_num_985: 'NaN', change_num_211: 'NaN', change_num_syl: 'NaN'},{id: 2022, change_num_985: 'NaN', change_num_211: 'NaN', change_num_syl: 'NaN'},];console.log("看这：", tableData[0][0])for (var i = 0; i < per.length; i++) { //遍历一下json数据var trow2 = getDataRow2(per[i]); //定义一个方法,返回tr数据tbody2.appendChild(trow2);}}

然后我上网查找JavaScript window.onload的用法，发现onload()函数只能执行一次，所以相当于我写的两个onload()只有第二个是起作用的，第二个会覆盖第一个onload()函数内容，故只显示第二个table的数据。

解决问题

查看文档可知

故多个函数的正确用法如下示范代码

<script type="text/javascript">
window.onload=function(){function runoob1(){document.getElementById("bg").style.backgroundColor="#F00";}function runoob2(){document.getElementById("bg").style.width="200px";document.getElementById("bg").style.height="200px";}runoob1();runoob2();
}
</script>

所以我把我的代码中onload()中的函数都放在了一起，定义完成之后依次调用两个函数。改正后代码如下：

window.onload = function () {function func1() {var tbody = document.getElementById('tbMain');{var per = [{id: 2020, change_num_bk: 'NaN', change_num_hg: 'NaN', change_num_lq: 'NaN'},{id: 2021,change_num_bk: judge(bkl1) + bkl1.toFixed(4) * 100 + '%' + '(' + judge(bkl11) + bkl11 + ')',change_num_hg: judge(bkl3) + bkl3.toFixed(4) * 100 + '%' + '(' + judge(bkl33) + bkl33 + ')',change_num_lq: judge(bkl5) + bkl5.toFixed(4) * 100 + '%' + '(' + judge(bkl55) + bkl55 + ')'},{id: 2022,change_num_bk: judge(bkl2) + bkl2.toFixed(3) * 100 + '%' + '(' + judge(bkl22) + bkl22 + ')',change_num_hg: judge(bkl4) + bkl4.toFixed(4) * 100 + '%' + '(' + judge(bkl44) + bkl44 + ')',change_num_lq: judge(bkl6) + bkl6.toFixed(4) * 100 + '%' + '(' + judge(bkl66) + bkl66 + ')'},];console.log("看这：", tableData[0][0])for (var i = 0; i < per.length; i++) { //遍历一下json数据var trow = getDataRow(per[i]); //定义一个方法,返回tr数据tbody.appendChild(trow);}}function func2() {var tbody2 = document.getElementById('tbMain2'){var per = [{id: 2020, change_num_985: tableData[0][0], change_num_211: 'NaN', change_num_syl: 'NaN'},{id: 2021, change_num_985: 'NaN', change_num_211: 'NaN', change_num_syl: 'NaN'},{id: 2022, change_num_985: 'NaN', change_num_211: 'NaN', change_num_syl: 'NaN'},];console.log("看这：", tableData[0][0])for (var i = 0; i < per.length; i++) { //遍历一下json数据var trow2 = getDataRow2(per[i]); //定义一个方法,返回tr数据tbody2.appendChild(trow2);}}func1()func2()}

也即

最后显示正常

js同一页面两个表格table数据显示冲突相关推荐

通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
Springboot整合layui之一个页面显示两张表格
该文章由作者精心整理与总结,详细记录了对问题的思考与解决过程,原创文章,转载请在文章明显位置注明出处与原文链接!大家一起成长!!! 需要在layui同一个页面中显示两个子页面,其中一个页面中的表格添加 ...
Jquery导出页面表格table的内容为Excel，PDF，DOC格式
Jquery导出页面表格table的内容为Excel,PDF,DOC格式文档地址:http://www.jqueryfuns.com/resource/2381 1.引入jquery的js–这里就不 ...
js layui跳转页面_Layui数据表格跳转到指定页的实现方法
Layui数据表格跳转到指定页的实现方法 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(&quo ...
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法) 转载,点击跳转
html 页面自适应table,HTML页面自适应宽度的table表格
这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 WEB应用的页面,表 ...
html 表格自动计算,JS实现相仿excel的表格数据输入,并自动计算的页面
JS实现类似excel的表格数据输入,并自动计算的页面 JS实现类似excel的表格数据输入,并自动计算的页面分享到: ------解决方案-------------------- 这个需要自己写函 ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...
js导出html页面到excel表格,JavaScript将页面表格导出为Excel的具体实现
导出Excel var idTmr = ""; function killExcelProcess(appExcel_){ appExcel_.Quit(); appExcel_ ...

js同一页面两个表格table数据显示冲突

js同一页面两个表格table数据显示冲突

解决问题

最后显示正常

js同一页面两个表格table数据显示冲突相关推荐

最新文章

热门文章