简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4月13日作业 完成表格自动生成器案例 要求能自动生成表格的标题
Blogger Information
Blog 38
fans 0
comment 1
visits 30395
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月13日作业 完成表格自动生成器案例 要求能自动生成表格的标题
1
Original
685 people have browsed it

idnex.php：处理前端

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	
		<p><label>标题:<input type="text" name="title"></label></p>
		<p><label>行:<input type="text" name="rows"></label></p>
		<p><label>列:<input type="text" name="cols"></label></p>
		<p><button>生成</button><button>重置</button></p>
</body>
</html>
<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').eq(0).click(function(){
		// 跳过标题，进行验证
		$(':input:gt(0)').not('button').each(function(index,obj){

			if ($(obj).val().length == 0) {
				$(obj).after('<span>内容不能为空</span>')
				return false
			}else if(isNaN($(obj).val())){
				$(obj).after('<span>内容必须为数字</span>')
				return false
			}else if ($(obj).val <= 0) {
				$(obj).after('<span>内容必须大于零</span>')
				return false
			}
			// ajax,处理用户的请求
			if (flag == true) {
			$.get(
				// 服务器脚本
				'demo1.php',
				// 将请求的参数发生到服务器
				{
				title:$('input[name="title"]').val(),
				rows: $('input[name="rows"]').val(),
				cols: $('input[name="cols"]').val()
				// 请求成功的回调函数
			},function(data){
				/////////////////
				//先将上一次生成的表格删除 //
				/////////////////
				$('p:last').next().remove()
				///////////
				//生成新的表格 //
				///////////
				$('p:last').after(data)
				flag = false
			})
		}
		})
		// 处理标题的验证
		if ($(':input:first').val().length ==0){
			$(':input:first').after('<span>内容不能为空</span>')
			flag = false
		}else if(!isNaN($(':input:first').val())){
			$(':input:first').after('<span>内容不能为数字</span>')
			flag = false
		}
		$('button').eq(1).click(function(){
			// 将数据清空
			$(':input').not('button').val('')
			// 焦点设置在行上
			$(':input').eq(1).focus()
			// 将上一次请求生成的表格删除
			$('p:last').next().remove()

			flag = true
		})
	})
		
</script>

运行实例 »

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

demo1.php：后端的PHP

实例

<?php 
// 判断请求的类型是否是get
if($_SERVER['REQUEST_METHOD']=='GET'){
	//判断用户发送的数据全部存在且不为空
	if(!empty($_GET['title'])&&!empty($_GET['rows']) && !empty($_GET['cols']))
	{
		// 接收变量名称
		$rows = $_GET['rows'];
		$title = $_GET['title'];
		$cols = $_GET['cols'];

		$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
		// 生成标题
		for ($i=0; $i<$cols; $i++) {
			$table .= '<caption>'.$title.'</caption>';
		}
		$table .= '</tr>';
		// 生成表头
		$table .= '<tr align="center" bgcolor="lightgreen">';
		for ($i=0; $i<$cols; $i++) {
			$table .= '<th>X</th>';
		}
		$table .= '</tr>';
		//生成表格内容区
		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>');
}


 ?>

运行实例 »

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


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
  • 1
    2018-03-16 00:39:40
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！