js根据成绩表数组生成表格。

最新推荐文章于 2022-06-13 11:16:35 发布

陌巷偷客

最新推荐文章于 2022-06-13 11:16:35 发布

阅读量1k

点赞数 1

分类专栏： js基础入门练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_53881313/article/details/124253739

版权

js基础入门练习专栏收录该内容

23 篇文章 5 订阅

订阅专栏

给定一个数组例如

var data = [

{ StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "230", Comment: "D" },

{ StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "268", Comment: "D" },

{ StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "274.5", Comment: "C" },

{ StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "265", Comment: "D" },

{ StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "284", Comment: "C" },

{ StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "248", Comment: "D" },

{ StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "185", Comment: "E" },

{ StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "258", Comment: "D" }

];

来生成一个表格，结果如下：

数组已经给了总成绩。和评价等级。

代码如下：

首先写css样式：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            margin:100px auto;
            margin-left: 200px;
        }

        .custom-table,
        .custom-table tr,
        .custom-table th,
        .custom-table td {
            border: 1px solid #bbb;
        }

        .custom-table {
            border-collapse: collapse;
            text-align: center;
        }

        .custom-tavle th,
        .custom-table td {
            width: 100px;
            height: 48px;
        }
    </style>

html里面写一个div就可以了

 <div class="box" id='box'>
       
    </div>

js代码如下：

 <script>
        var data = [       
            { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "230", Comment: "D" },
            { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "268", Comment: "D" },
            { StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "274.5", Comment: "C" },
            { StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "265", Comment: "D" },
            { StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "284", Comment: "C" },
            { StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "248", Comment: "D" },
            { StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "185", Comment: "E" },
            { StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "258", Comment: "D" }
        ];
       
        //改写table构造函数，实现数据自动渲染
        function Table(data){
            //自身的属性
            this.data=data;
        }
        Table.prototype.createTable=function(){
            let _data=this.data;
          var _html =
                '<table class="custom-table"><tr><th>学号</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th><th>评价</th></tr>';
            for(let r=0;r<_data.length;r++){
                _html+='<tr>';
                for(let c in _data[r]){
                 _html+='<td>'+_data[r][c]+'</td>';
                }
                _html+='</tr>';

            }
            _html+='</table>';
            return _html;
        }
        var table01=new Table(data);
        var _box=document.getElementById('box');
        _box.innerHTML = table01.createTable();
    </script>

第一层for循环是行数，即成绩数组的长度。

里面的一层for循环是数组里面的元素，由于是{ }包裹的，是对象，没有长度，不可以用和外层一样的++循环方式，而是用数组下标表示确定数值。用for in 来写列数，最后调用就可以。