登录  /  注册
博主信息
博文 64
粉丝 2
评论 3
访问量 73472
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
自动生成表格
清雨的博客
原创
1921人浏览过


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格生成器</title>
	<style type="text/css">
		body {
			width: 500px;
			height: auto;
			margin: auto;
			text-align: center;
		}
		h2 {
			color: #070706;
			margin: auto;
			height: 50px;
			line-height: 50px;
			
		}
		p {
			margin: 5px 0;
			padding: 0;
		}
		.bu {
			float: right;
		}
		button {
			width: 100px;
			height: 30px;
			border: none;
			background-color: #02D6FC;
			color: white;
			margin-left: 20px;
		}
		button:hover {
			background-color: #FD002B;
			font-size: 1.2em;
			cursor: pointer;
		}
		hr {
			clear: both; //清浮动
		}
		table {
			width: 100%;
			text-align: center;
		}
	</style>
</head>
<body>
	<h2>表格生成器</h2>
	<p><label>输入标题:<input type="text" name="title"  placeholder="请输入标题"></label></p>
	<p><label>输入行数:<input type="text" name="rows"  placeholder="请输入数字"></label></p>
	<p><label>输入列数:<input type="text" name="cols"  placeholder="请输入数字"></label></p>
	<p class="bu"><button>生成表格</button><button>重置行列</button></p>
	
	<hr color="blue" size="2">
	<div class="table">
		
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		//创建请求标志,防止重复请求
		var flag = true
		//添加第一个按钮事件
		$('button:first').on('click',function(){
			//1.遍历并验证用户输入的信息   筛选出按钮和第一个标题输入框
			$(':input').not('button').not(':input:first').each(function(index,war){
				//对标题输入框进行判断    
				//非空判断
				if ($(':input:first').val().length == 0) {
					$(':input:first').after('<span style="color:red;">不能为空,请重新输入</span>')
					//用定时器使信息2秒后消失
					setTimeout(function(){
						$(':input:first').next().remove()
					},2000)
					return false
				}
				//非空判断
				if ($(war).val().length == 0) {
					$(war).after('<span style="color:red;">不能为空,请重新输入</span>')
					//用定时器使信息2秒后消失
					setTimeout(function(){
						$(war).next().remove()
					},2000)
					return false
					//判断是否为数字
				} else if (isNaN($(war).val())) {
					$(war).after('<span style="color:red;">必须是数字</span>')
					setTimeout(function(){
						$(war).next().remove()
					},2000)
					return false
					//判断不能为0
				} else if ($(war).val() <= 0) {
					$(war).after('<span style="color:red;">数字必须大于0</span>')
					setTimeout(function(){
						$(war).next().remove()
					},2000)
					return false
				}
			})
			//1.处理用户的请求(ajax)
			if (flag == true) {
				$.get('require.php',//a.请求处理的脚本
					{//b.发送请求参数
						title: $('input[name="title"]').val(),
						rows: $('input[name="rows"]').val(),
						cols: $('input[name="cols"]').val()
                    },
                    function(data){//c.请求成功的回调函数
                    	$('.table').next().remove()//清除上一次生成的表格

                    	$('.table').append(data)//生成新表格
                    	flag = false
                    }
					)
			    }
		})
		//添加重置按钮脚本
			$('button:last').click(function(){
			
			$(':input').not('button').val('')//清空表格内容数据
            
			$(':input:first').focus()//将输入焦点重置到第一行文本框上
            
			$('p:last').next().remove()//删除上一次生成的表格
			
			flag = true//重置请求状态,允许用户再次请求
		})
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

PHP代码 require.php

实例

<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
	//判断用户发送的数据是否全部存在且不为空
	if (!empty($_GET['title']) && !empty($_GET['rows']) && !empty($_GET['cols'])){
		//用较短的变量名称进行转存
		$tit = $_GET['title'];
		$rows = $_GET['rows'];
		$cols = $_GET['cols'];
		//创建表格的基本结构,采用字符串拼接方式(.=),最后统一生成
		$table = '<table border="2" cellspacing="0" cellpadding="6"  width="80%" >';
		//生成标题
		$table .= '<caption style="color:fuchsia;font-size:1.5em;margin:10px auto">'.$tit.'</caption>';
		//下面用双重循环生成表格
		//1.生成表头
		$table .= '<tr align="center" bgcolor="#c0ebd7">';
		for ($h=0; $h<$cols; $h++){
			$table .= '<th>name</th>';
		}
		$table .= '</tr>';

		//2.生成表格内容区
		for ($r=0; $r<$rows; $r++) {
			$table .= '</tr>';
			for ($c=0; $c<$cols; $c++){
				$data = $r*$cols+$c;
				//++$data 可以确保从1开始计数
				$table .= '<td align="center">'.'表格'.++$data.'</td>';
			}
			$table .='</tr>';
		}
		$table .= '</table>';
		//将生成的表格返回到客户端
		echo $table;
		//结束当前脚本
		exit();
	}
} else {
	exit('<span style="color:red">请求类型非法</span>');
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图

1.png

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学