js实现，给定一个数组，将数组内容写入并生成表格，表格的宽高可由输入的参数控制。

结果：这里的宽高可以设置。

 

成绩数组：

数组如下。

var data = [

                { StudentNumber: '学号', Chinese: '语文成绩', Math: '数学成绩' , English:' 英语成绩', TotalScore:' 总成绩', Comment: '成绩等级'},

                { 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" }

            ];

html代码：

 <!-- 使用构造函数创建一个自定义对象，通过自定义对象生成指定行数、列数、宽度和高度的表格 -->
    <div class="container">
        <div class="box" id="box">
            
        </div>
    </div>

添加样式，css如下：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 50px auto;
        }

        .box {
            margin: 100px auto;
            margin-left: 30%;
        }

        table,
        tr,
        td {
            border: 1px solid black;
            box-sizing: border-box;
            vertical-align: center;
            text-align: center;
            border-collapse: collapse;
        }

        td {
            outline: none;
        }
    </style>
</head>

js代码如下：

<script>
       
        //成绩数组
        var data = [
                { StudentNumber: '学号', Chinese: '语文成绩', Math: '数学成绩' , English:' 英语成绩', TotalScore:' 总成绩', Comment: '成绩等级'},
                { 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构造函数，实现数据自动渲染     
        // var _Score_str='';
        //写表格
        function CreateTable(data, width, height) {
            this.data = data;
            this.width = width;
            this.height = height;
        }
        CreateTable.prototype.outTable = function () {
            let _data=this.data;
            var _width = this.width;
            var _height = this.height;
            var _html = '<table>';
          
            for (let i = 0; i < _data.length; i++) {
                _html += '<tr>';
                for (let c in _data[i]) {
                    _html += '<td width="' + _width + '" height="' + _height + '">'+_data[i][c]+'</td>';
                }
                _html += '</tr>';
            }
            _html += '</table>';
           return _html;
        }
        //通过改变上面的成绩数组，下面的data会改变，而后面的数字表示要设置的宽高
        var table01 = new CreateTable(data, 80, 50);
        var _box=document.getElementById('box');
        _box.innerHTML=table01.outTable();
    </script>