使用JSP制作自定定义表格

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/Mr_hanghang/article/details/102733559

使用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;
					
										}

简单的自定义表格如上,如有BUG请与评论区留言,

猜你喜欢

转载自blog.csdn.net/Mr_hanghang/article/details/102733559