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

大叔_CGD

已于 2022-09-08 18:53:26 修改

阅读量519

点赞数

文章标签： javascript 前端 html

于 2022-09-08 18:47:16 首次发布

本文链接：https://blog.csdn.net/qq_20015253/article/details/126769392

版权

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()

        }