博客列表 >4月13日作业

4月13日作业

老专的博客
老专的博客原创
2018年04月15日 13:07:40492浏览

4月13日作业

完成了表格标题的加载,但条件判断不好?

代码:

homework(0413)2.php

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6.实战:表格自动生成器</title>
	<style type="text/css">
		h3 {
			color: green;
			margin-left:40px;
		}
		button {
			width: 80px;
			height: 30px;
			border: none;
			background-color: green;
			color:white;
			margin-right: 30px;
		}
	</style>
</head>
<body>
	<h3>表格生成器</h3>
	<p><label>输入表格名称:<input type="text" name="title" value="计划表"></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>
	<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		//创建请求标志,防止重复请求
		var flag = true

		$('button:first').on('click',function(){

			//第一步:遍历并验证用户的输入信息	
			//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象	
			$(':input').not('button').each(function(index,obj){
				//非空判断
				if ($(obj).val().length == 0) {
					//在当前元素后添加提示信息
					$(obj).after('<span style="color:red">不能为空</span>')
					//用定时器使提示信息2秒后消失
					setTimeout(function(){
						//2秒后,将提示信息删除
						$(obj).next().remove()
					},2000)
					//返回让用户重新操作
					return false
					//非数字判断
				} else if (isNaN($(obj).val())) {
					$(obj).after('<span style="color:red">必须是数字</span>')
					setTimeout(function(){
						$(obj).next().remove()
					},2000)
					return false
					//零、负值判断
				} else if ($(obj).val() <= 0) {
					$(obj).after('<span style="color:red">必须大于0</span>')
					setTimeout(function(){
						$(obj).next().remove()
					},2000)
					return false
				}
			})

			//第二点:处理用户的请求(Ajax实现)
			if (flag == true) {
				$.get(
					//1.请求处理的脚本
					'homework(0413)2.php',
					//2.发送的请求参数
					{
						title: $('input[name="title"]').val(),
						rows: $('input[name="rows"]').val(),
						cols: $('input[name="cols"]').val()
					},
					//3.请求成功的回调函数
					function(data){
					//先将上一次生成的表格删除
					$('p:last').next().remove()
					//生成新的表格
					$('p:last').after(data)
					//将请求标志设置为false,禁止重复请求
					flag = false
				}
			)
			}	
		})

		//重置按钮
		$('button').eq(1).click(function(){
			//将行与列数据全部清空
			$(':input').not('button').val('')
			//将输入焦点重置到行文本框上
			$(':input:first').focus()
			//将上一次请求生成的表格删除
			$('p:last').next().remove()
			//重置请求状态为true:允许用户请求
			flag = true
		})
	</script>
</body>
</html>

运行实例 »

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

代码:

homework(0413)2.php

实例

<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
	//如果用户发送的数据全部存在且不为空
	if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
		//用较短的变量名称进行转存
		$title = $_GET['title'];
		$rows = $_GET['rows'];
		$cols = $_GET['cols'];
		//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
		$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
		//下面用双重循环来生成这个表格
		//0.生成表的标题
		$table .= '<caption align="center"><h2>'.$title.' </h2></caption>';
		//1生成表头
		$table .= '<tr align="center" bgcolor="lightgreen">';
		for ($i=0; $i<$cols; $i++) {
			$table .= '<th>X</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>');
}

运行实例 »

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

01.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议