Applet can automatically generate a table of
When you are in high line input box, enter the appropriate table, column width, number of rows, how many columns of numbers, click Create table will automatically generate a table you want.
: Before the data is not entered
after clicking the input data to generate a table to create the table: (In order to better regional branches I set up a black background fill)
== program read: == written on the page are four rows, columns, row height, column width input box and a button to create tables, create objects in JavaScript which accepts data input using a for loop generate a table you want to use to determine if the number of rows in the for loop in parity and set a different background color, you want a table on the well.
Let's look at the code
- Page Content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
行数:<input type="text" id="row" />
列数:<input type="text" id="col" />
行高:<input type="text" id="height" />
列宽:<input type="text" id="width" />
<input type="button" value="创建表格" onclick="show()" />
<div id="input"></div>
</body>
<script src="js/table.js"></script>
</html>
- JavaScript code
//创建对象
function table(row, col, height, width){
this.row=row;
this.col=col;
this.height=height;
this.width=width;
}
function show(){
//边框厚度
table.prototype.border=1;
table.prototype.createtable=function(){
var screen="";
screen ="<table align='left' border='"+this.border+"'>"
var bgcolor;
//循环输出行
for(i=0;i<this.row;i++){
//分辨颜色
if(i%2 != 0){
bgcolor="#ffffff";
}else{
bgcolor="#000000";
}
screen += "<tr bgcolor='"+bgcolor+"'>";
//循环输出列
for(j=0;j<this.col;j++){
screen +="<td height='"+this.height+"' width='"+this.width+"'></td>"
}
screen+="<tr>";
}
screen+="<table>";
return screen;
}
//创建对象
var table1 = new table(
document.getElementById("row").value,
document.getElementById("col").value,
document.getElementById("height").value,
document.getElementById("width").value
);
//调用方法
document.getElementById("input").innerHTML = table1.createtable();
}
A fun and easy form on their own generate! ! !