用js编写，使用构造函数，自动生成一个表格，将考试的成绩表依次放入表格中。

最新推荐文章于 2022-07-22 11:42:19 发布
最新推荐文章于 2022-07-22 11:42:19 发布
阅读量1k 收藏 3
点赞数
分类专栏： js基础练习 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_53911328/article/details/124247477
版权
本文展示了如何利用JavaScript编程，通过构造函数动态创建一个表格，将给定的考试成绩数据填充到表格中。数据包括学生编号、语文、数学、英语分数以及总分和评语等信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

var data = [
    { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "", Comment: "" },
    { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "", Comment: "" },
    { StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "", Comment: "" },
    { StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "", Comment: "" },
    { StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "", Comment: "" },
    { StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "", Comment: "" },
    { StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "", Comment: "" },
    { StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "", Comment: "" }
];


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
JavaScript学习笔记--进阶之路

				
			

			

				

					JackieDYH的博客
				

				

					03-16
					
					1714
					
				

			

		

		

			
				
了解js特性&事件使用

20200316

1、JavaScript简介


历史：
    第一个浏览器 就是文本和图片

网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互
诞生：为了实现用户和网页的交互而出现

1、开发一门新语言
2、使用已经成熟的语言（java<sun> python c ------）

​    这个时候使用的是java ---...

			
		

	



                

            
              



	

		

			

				
					
java工程师笔试面试题

					
热门推荐

				
			

			

				

					pamguangyou的专栏
				

				

					02-08
					
					2万+
					
				

			

		

		

			
				
1. J2EE 是什么？它包括哪些技术？
解答：从整体上讲，J2EE 是使用 Java 技术开发企业级应用的工业标准，它是 Java 技术不断适应和促进企业级应用过程中的产物.适用于企业级应用的 J2EE,提供一个平台独立的、可移植的、多用户的、安全的和基于标准的企业级平台，从而简化企业应用的开发、管理和部署。J2EE 是一个标准，而不是一个现成的产品。
主要包括以下这些技术：
1) Ser

			
		

	



              


  
              

                


	

		

			

				
					
js制作成绩表（自动创建表单）

				
			

			

				

					m0_67448414的博客
				

				

					04-18
					
					1347
					
				

			

		

		

			
				
css代码   
table {
        margin: 50px auto 0;
        text-align: center;
    }
    
    .class-schedule {
        font-weight: bold;
    }
    
    tr,
    td {
        text-align: center;
        width: 140px;
        border-co.

			
		

	





	

		

			

				
					
JS-纯js制作动态成绩表（流程控制语句+js内置对象）

				
			

			

				

					weixin_34356310的博客
				

				

					09-08
					
					306
					
				

			

		

		

			
				
流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表
<!DOCTYPE html><html>
	<head>		<meta charset="UTF-8">		<title>综合运用</title>		<style type="text/css...

			
		

	



		

			
		



	

		

			

				
					
JavaScript函数创建表格

				
			

			

				

					Year98Programmer的博客
				

				

					11-04
					
					1620
					
				

			

		

		

			
				
JavaScript使用函数创建表格
<button onclick="formStuden()">点我创建表格</button>
    <script>
        function formStuden() {
            //创建表
            var atb = document.createElement('table')...

			
		

	





	

		

			

				
					
案例：利用构造函数创建表格 table

				
			

			

				

					weixin_30521649的博客
				

				

					10-29
					
					294
					
				

			

		

		

			
				
案例：利用构造函数创建表格 table
1. 构建基本逻辑 添加属性
<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table() {
        /* 实际上在调用这个构造函数的时候，应该利用 DOM 方法
...

			
		

	





	

		

			

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

				
			

			

				

					m0_53881313的博客
				

				

					04-18
					
					1130
					
				

			

		

		

			
				
给定一个数组例如

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

  ...

			
		

	





	

		

			

				
					
HTML5、CSS、JS基础

				
			

			

				

					qq_49101841的博客
				

				

					03-03
					
					2582
					
				

			

		

		

			
				
学习笔记

			
		

	





	

		

			

				
					
原js笔记

				
			

			

				

					Pwsifeng的博客
				

				

					01-10
					
					2833
					
				

			

		

		

			
				
s原生JS笔记
电话：17339853876（微信同号）
二阶段学习内容
1、B/S架构（web结构）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)]
2、前端工程师的工作


人机交互


前后端交互


3、HTML、CSS、JS的作用和关系
一个网页由三部分组成：HTML、CSS、Javascript


HTML：       结构（静态）
[外链图片转存失败,源站可能有防盗链

			
		

	





	

		

			

				
					
html制作统计期末成绩,JS-结合html综合练习js的对象——班级成绩表制作

				
			

			

				

					weixin_36465108的博客
				

				

					06-09
					
					1424
					
				

			

		

		

			
				
对象综合练习body {font: 14px "微软雅黑";}span {padding: 5px;}table {margin: 0 auto;border: 3px solid cornflowerblue;}tr{border: 1px solid #4169E1;}td#y,#m,#d,#day{border:none;}x班期末成绩表姓名成绩备注小明87小花81小红97小天76小张54不...

			
		

	





	

		

			

				
					
用js实现的一个根据内容自动生成表格的函数

				
			

			

				

					12-01
				

			

		

		

			
				
晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。 要求是： 1，对于空内容，应该写为”<td> </td>”,否则在ie会显示的很变态（ie当作该单元格不存在）。 2，当输出数据条数不等于表格的“长X宽”时，用”<td> </td>”自动填补最后一行空余的地方。 其实也很简单，当时做asp时用了一个较复杂的算法（下面代码中MakeTable2），今天又想到一个更容易理解的算法（MakeTable1）,今天用js实现了下，不过郁闷的是感觉效率上都一样，这样还是用第一个比较好（容易理解，代码少）。 代码如下：  
     
     
Untitled 1     
.sty

			
		

	





	

		

			

				
					
学生成绩录入系统代码

				
			

			

				

					12-04
				

			

		

		

			
				
学生成绩录入系统，学生成绩管理是高等学校教务管理的重要组成部分，主要包括学生注册、考试成绩的录入及修改、成绩的统计分析等等。设计一个系统实现对学生成绩的管理。

			
		

	





	

		

			

				
					
使用js构造函数创建一个自定义对象，通过自定义对象生成指定行数、列数、宽度和高度的表格。

				
			

			

				

					weixin_56726579的博客
				

				

					02-28
					
					1252
					
				

			

		

		

			
				
<script>
function CreateTable(row, col, width, height) {
            this.row = row;
            this.col = col;
            this.width = width;
            this.height = height;
        }
        var _box = document.getElementById('box');
        C.

			
		

	





	

		

			

				
					
利用构造函数创建表格

				
			

			

				

					weixin_30477797的博客
				

				

					10-27
					
					383
					
				

			

		

		

			
				
1. 构建基本逻辑 添加属性
<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table() {
        /* 实际上在调用这个构造函数的时候，应该利用 DOM 方法
         * 创...

			
		

	





	

		

			

				
					
js动态表格创建

				
			

			

				

					星辰里的月光
				

				

					10-12
					
					1706
					
				

			

		

		

			
				
在这里我提供两种方法
一.使用自定义函数 在页面上输入行列宽高，调用函数时通过传递的参数指定的行列宽高生成表格源代码;
效果图如下：

1.HTML代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script ...

			
		

	





	

		

			

				
					
1.2 案例：利用构造函数创建表格 table

				
			

			

				

					Jepson_鹏鹏的专栏
				

				

					10-29
					
					1143
					
				

			

		

		

			
				
案例：利用构造函数创建表格 table1. 构建基本逻辑 添加属性<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }    function Table() {
        /* 实际上在调用这个构造函数的时候，应该利用 DOM 方法
         *

			
		

	





	

		

			

				
					
纯js实现单击可修改表格（类似成绩单）

				
			

			

				

					C_players的博客
				

				

					04-20
					
					936
					
				

			

		

		

			
				
纯js实现单击可修改表格（类似成绩单）
功能：实现成绩单单击表格可对数据进行修改且对输入的数字大小有验证例如不小于0不大于100，总分栏会对总分进行求和(利用了es6的模板字符串）。



实现效果：



代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edg

			
		

	





	

		

			

				
					
通过JavaScript创建表格

				
			

			

				

					TomHe789
				

				

					04-05
					
					419
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id = "mountains"></div>

&l...

			
		

	





	

		

			

				
					
用构造函数创建对象。

				
			

			

				

					m0_67176957的博客
				

				

					07-22
					
					713
					
				

			

		

		

			
				
用构造函数创建对象

之前我们学会了使用工厂模式创建对象，但是，你会发现我们所创建的对象类型都是Object，具体代码如下：



// 使用工厂模式创建对象

function createPerson(name, age) {

  // 创建新的对象

  var obj = new Object();

  // 设置对象属性

  obj.name = name;

  obj.age = age;

  // 设置对象方法

  obj.sayName = func...

			
		

	





	

		

			

				
					
应用构造函数创建一个自定义对象，通过自定义
对象生成指定行数、列数的表格。提交代码和
结果截图，使用JavaScript

					
最新发布

				
			

			

				

					10-12
				

			

		

		

			
				
在JavaScript中，你可以创建一个名为`TableGenerator`的构造函数来动态生成指定行数和列数的表格。下面是一个简单的例子：

```javascript
function TableGenerator(rowCount, colCount) {
  this.rows = rowCount;
  this.cols = colCount;

  // 构造函数内部生成表格
  this.generateTable();
}

TableGenerator.prototype.generateTable = function() {
  let tableHtml = '<table border="1">';

  for (let i = 0; i < this.rows; i++) {
    tableHtml += '<tr>';

    for (let j = 0; j < this.cols; j++) {
      tableHtml += `<td>Cell ${i + 1}-${j + 1}</td>`;
    }

    tableHtml += '</tr>';
  }

  tableHtml += '</table>';
  return tableHtml;
}

// 使用构造函数并获取生成的表格
const customTable = new TableGenerator(5, 4);
console.log(customTable.generateTable());

// 如果需要展示结果截图，通常浏览器环境无法直接截取屏幕，你需要将结果保存到HTML元素中，然后截图工具如Puppeteer等辅助处理，但这超出了这个示例的范围。
```

在这个例子中，我们创建了一个`TableGenerator`对象，并在其中包含了生成表格的方法。当你创建一个新的`TableGenerator`实例时，会自动调用`generateTable()`方法生成对应行数和列数的表格。

请注意，在实际应用中，你可能需要根据需求调整生成的内容，比如添加样式或者动态数据填充。如果你想展示结果截图，需要在支持截图功能的环境中操作，这通常涉及更复杂的自动化测试工具。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值