jQuery创建表格

最新推荐文章于 2023-10-13 11:16:05 发布

孤独斗士

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量1.6k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/gulanga5/article/details/107217550

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>创建表格练习</title>
	<style type="text/css">
		body{padding-left:15px;font-size:20px;}
		table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
		table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
		input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
		input[type='button']{font-size:20px;}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		/** 练习1：创建单行单列的表格 */
		function createTable1(){
			//创建表格
			var $table=$("<table></table>");
			var $tr=$("<tr></tr>");
			var $td=$("<td>Hello,我是td</td>");
			$tr.append($td);
			$table.append($tr);
			$("body").append($table);
			$("body").append("<hr/>");
		}
		/** 练习2：创建5行6列的表格 */
		function createTable2(){
			var $table=$("<table></table>");
			for(var r=0;r<5;r++){
				var $tr=$("<tr></tr>");
				for(var c=0;c<6;c++){
					var $td=$("<td>hello,我是td</td>");
					$tr.append($td);
				}
				$table.append($tr);
			}
			$("body").append($table);
			$("body").append("<hr/>");
		}
		
		/** 练习3：创建指定行和列的表格 */
		function createTable3(){
			var rows=$("#rows").val();
			var cols=$("#cols").val();
			var $table=$("<table></table>");
			for(var r=0;r<rows;r++){
				var $tr=$("<tr></tr>");
				for(var c=0;c<cols;c++){
					var $td=$("<td>hello,我是td</td>");
					$tr.append($td);
				}
				$table.append($tr);
			}
			$("body").append($table);
			$("body").append("<hr/>");
		}
	</script>
</head>
<body>
		<!-- 练习1：点击下列按钮创建单行单列表格 -->
		<input type="button" name="" id="" value="创建单行单列表格" onclick="createTable1();"/><br>
		<!-- 练习2：点击下列按钮创建5行6列表格 -->
		<input type="button" name="" id="" value="创建5行6列表格" onclick="createTable2();"/><br>
		<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
		<input type="button" name="" id="" value="创建表格输入行数列数" onclick="createTable3();"/><br>
		行数:<input type="text" name="" id="rows" value="" /><br/>
		列数:<input type="text" name="" id="cols" value="" /><br/>
		<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
</body>
</html>

孤独斗士

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery创建表格

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>创建表格练习</title> <style type="text/css"> body{padding-left:15px;font-size:20px;} table{ border:1px solid #0099FF; width:70%; border-collapse:collapse
复制链接

扫一扫