javascript中应用构造函数创建一个字定义对象，通过自定义对象生成指定行数列数的表格

深藏阁楼爱情的钟 2022-12-11 15:05 18阅读 0赞

定义构造函数Table(),在函数中this关键字初始化对象中的属性，然后用prototype属性为对象添加属性和方法，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title>表格</title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function Table(row,col,width,height){
    				//设置对象属性
    				this.row=row;
    				this.col=col;
    				this.width=width;
    				this.height=height;
    			}
    			Table.prototype.border=1;
    			Table.prototype.createtable=function(){
    				var show ="";//定义字符串
    				show="<table align='center'border='"+this.border+"'width='"+this.width+"'>";
    				var bgcolor;
    				for(i=1;i<=this.row;i++){
    					if(i%2!=0){
    						bgcolor="#FFFFFF";
    					}else{
    						bgcolor="#DDDDFF";
    					}
    					show +="<tr bgcolor='"+bgcolor+"'>";
    					for (j=1;j<=this.col;j++) {
    						show+="<td height='"+this.height+"'></td>";
    					}
    					show+="</tr>";
    				}
    				show +="</table>";
    				return show;
    			}
    			var table1=new Table(5,3,600,20);
    			document.write(table1.createtable());
    			document.write("<p>");
    			var table2=new Table(3,6,500,25);
    			document.write(table2.createtable());
    		</script>
    	</body>
    </html>

结果如图：  
![略][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/dac4e18db9b442fc837a854c29941a02.png