<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>应用自定义对象生成表格</title>
<script type="text/javascript"> function Table(row,col,width,height){
//设置对象属性
this.row=row;
this.col=col;
this.width=width;
this.height=height;
}
function result(){
Table.prototype.border=1; //为对象添加border属性
Table.prototype.createtable=function(){ //为对象添加createtable()方法
var show = ""; //声明变量并初始化
//定义要输出的字符串
show ="<table 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; //返回变量的值
}
//创建对象table1
var table1 = new Table(
document.getElementById("row").value,
document.getElementById("col").value,
document.getElementById("width").value,
document.getElementById("height").value
);
//调用对象的方法
// document.write(table1.createtable());
document.getElementById("div").innerHTML = table1.createtable()
} // var table1 = new Table(5,3,600,20); //创建对象table1
// document.write(table1.createtable()); //调用对象的方法
// document.write("<p>"); //输出段落标记
// var table2 = new Table(3,6,500,25); //创建对象table2
// document.write(table2.createtable()); //调用对象的方法
</script>
</head>
<body>
行数:<input type="text" id="row"/><br/>
列数:<input type="text" id="col"/><br/>
高度:<input type="text" id="height"/>px<br/>
宽度:<input type="text" id="width"/>px<br />
<input type="button" value="创建表格" onclick="result()">
<div id="div"></div>
</body>
</html>
应用构造函数创建一个自定义对象,通过自定义对象生成指定行数、列数的表格。
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最近的项目需要根据后台的返回数据动态生成表格，当返回的json数组长度大于4时，绘制一个多行4列的表格，当小于4时...
- 阅读引导1. 需要先在 Windows 系统中安装 cmder2. 文中用 "<xxx>" 表示的字符均需替换为自...
