版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
使用JS制定自定义表格
效果图:
HTML代码
<table border="1" cellspacing="0"></table>
行数:<input type="text" id="row" /><br/>
列数:<input type="text" id="col" /><br/>
高度:<input type="text" id="height" /><br/>
宽度:<input type="text" id="width" /><br/>
<input type="button" id="click" value="生成自定义表格" onclick="cann()"/>
<br /><div id="div1"></div>
JSP代码
function Table(row, col, width, height) {
this.row = row;
this.col = col;
this.width = width;
this.height = height;
this.run = table;
}
Table.prototype.border=1;
function cann() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var table = new Table(row, col, width, height);
var show = table.run();
document.write(show);
}
function table() {
var show = ""
show= ("<table border='2' cellspacing='0' width='" + this.width + "px' height='" + this.height+">");
for (var i = 0; i < this.row; i++) {
if (i % 2 == 0) {
color = "#FFFFFF";
} else {
color = "#SDFSDF"
}
show += ("<tr bgcolor = '" + color + "'>")
for (var j = 0; j < this.col; j++) {
if (j) {
show += ("<td >")
show += ("</td>")
} else {
show += ("<td>")
show += ("</td>")
}
}
show += ("</tr>")
}
show += ("</table>");
return show;
var div1 = document.getElementById("div1");
div1.innerHTML = show;
}