课堂练习
应用自定义对象生成表格
<!DOCTYPE html>
<html>
<head lang="en">
<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 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; //返回变量的值
}
//创建对象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>