Js实现生成自定义输入行列宽高表格------Sestid

最新推荐文章于 2024-05-03 16:01:29 发布

Sestid

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量1.1k

点赞数 1

分类专栏： Js和jQuery实现的特效❤️

原文链接：https://blog.csdn.net/weixin_43330884/article/details/102521701

版权

Js和jQuery实现的特效❤️ 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

样式图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/table1.js"></script>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>行数:</td>
				<td><input type="text" id="row" /></td>
			</tr>
			<tr>
				<td>列数:</td>
				<td><input type="text" id="col" /></td>
			</tr>
			<tr>
				<td>宽度px:</td>
				<td><input type="text" id="w" /></td>
			</tr>
			<tr>
				<td>高度px:</td>
				<td><input type="text" id="h" /></td>
			</tr>
			<tr>
				<td align="center" colspan="2"><input type="button" id="createTable" onclick="createTable()" value="创建" /></td>
			</tr>
		</table>
		<div id="table"> </div>
	</body>
	<script type="text/javascript">
		function createTable() {
	var row = document.getElementById("row").value;
	var col = document.getElementById("col").value;
	var w = document.getElementById("w").value;
	var h = document.getElementById("h").value;
	var show = "";
	var bgcolor;
	show += '<table border="1" align="center" style="border-collapse: collapse;" >';
	for (var i = 0; i < row; i++) {//外层循环，输出表格的行
		if (i % 2 != 0) {
			bgcolor = "#87CEEB";
		} else {
			bgcolor = "#FFFFE0";
		}
		show += "<tr bgcolor='" + bgcolor + "'>";
		for (var j = 0; j < col; j++) {//内层循环，输出表格的列
			show += '<td height = "' + h + '" width = "' + w + '"></td>';
		}
		show += '</tr>';
	}
	show += '</table>';
	var result = document.getElementById("table");
	result.innerHTML = show;
}


	</script>
</html>

Sestid

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Js实现生成自定义输入行列宽高表格------Sestid

样式图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/table1.js"></script> </head> <body...
复制链接

扫一扫