表格生成器

能自动生成表格的小程序

当你在相应的输入框内输入表格的行高，列宽，多少行，多少列的数字后，点击创建表格就会自动生成你想要的表格。
未输入数据之前：
在这里插入图片描述
输入要生成表格数据之后点击创建表格：（为了更好的区分行我设置了黑色背景填充）

==程序解读：==在页面写上四个分别为行数，列数，行高，列宽的输入框和一个创建表格的按钮，在JavaScript里面创建对象接受输入的数据，使用for循环生成想要的表格，在for循环里使用if判断行数的奇偶并设置不同的背景色，一个想要的表格就做好了。

下面看代码

页面内容

<!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代码

//创建对象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();}