前端页面实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>0413作业php制作表格</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<h2>0413作业php制作表格</h2>
	<div class="wrap">
		<p><label>表格标题<input type="text" name="rows" value=""></label></p>
		<p><label>输入行数<input type="text" name="rows" value=""></label></p>
		<p><label>输入列数<input type="text" name="columns" value=""></label></p>
		<p><button>提交</button><button>重置</button></p>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//制作逻辑,获取用户输入内容,然后用alax发送到php中,然后在将php生成的数据返回来,用返回数据做回调函数
/*$.get(url, data, success)
url 是PHP地址
data 是要给php的数据
success 是回调函数 ,毁掉函数逻辑就是生成表格:1,按钮后面用after()方法生成表格标题和表格内容
*/

$(function(){   //页面加载函数

//这个是提交函数
$('button').eq(0).click(function(){  
	//获取提交按钮,给他增加点击事件
// 第一步,获取标题,表格行数,表格列数的数据
	var taTitle = $('input').eq(0).val() 
	//获取标题输入的内容,赋值给变量taTitle
	//console.log(taTitle) 测试正确
	//标题只要不为空就可以,所以标题变量有length,判断标题是不是空用if
	if (taTitle.length == 0) {
		//在标题标签label后面增加<span>,内容,标题不能为空
		$('label').eq(0).after('<span style="color:red">标题不能为空</span>')
		//提升体验,两点,1,鼠标焦点到输入框,2,提示在两秒后清空
		$('input').eq(0).focus() //focus()方法,让选中的元素获取鼠标焦点
		setTimeout(function(){ //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
			//$('span').eq(0).remove() //remove()方法,删除选中的对象
			$('input').eq(0).parent().next().remove() //这种方式比上面的方式好一些,用html中存在的元素进行选择过滤,避免用js中添加的元素进行选择
		},2000)//2000毫秒就是2秒	
	} 
	//获取了第一个变量 标题数据存在taTitle中

	var trRows = $('input').eq(1).val()
	//获取行数的输入内容,赋值给变量trrows
	//console.log(trRows) 测试正确
	//行数必须是正数数字,不能空,不能小于等于0,不能是字符
	if (trRows.length == 0) { 
		//如果是空,length就是0
		$('label').eq(1).after('<span style="color:red">行数不能为空</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(1).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(1).parent().next().remove()
		},2000)

	} else if(isNaN(trRows)){ //第二个条件,必须是数字 用isNaN()方法 ,判断一个变量不是一个数字
		$('label').eq(1).after('<span style="color:red">只能输入数字</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(1).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(1).parent().next().remove()
		},2000)
	} else if(trRows <= 0){ //第三个条件,不能是0和负数
		$('label').eq(1).after('<span style="color:red">必须大于0</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(1).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(1).parent().next().remove()
		},2000)
	}

	//获取了第二个变量,行数trRows

	//和行数一样,获取列数
	var tdCol = $('input').eq(2).val()
	//获取列数的数值,赋值给变量 tdCol
	//console.log(tdCol)测试争取
	if (tdCol.length == 0) { 
		//如果是空,length就是0
		$('label').eq(2).after('<span style="color:red">列数不能为空</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(2).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(2).parent().next().remove()
		},2000)

	} else if(isNaN(tdCol)){ //第二个条件,必须是数字 用isNaN()方法 ,判断一个变量不是一个数字
		$('label').eq(2).after('<span style="color:red">只能输入数字</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(2).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(2).parent().next().remove()
		},2000)
	} else if(tdCol <= 0){ //第三个条件,不能是0和负数
		$('label').eq(2).after('<span style="color:red">必须大于0</span>')
		//提示后,当前输入框获取焦点
		$('input').eq(2).focus()
		//提示两秒钟消失
		setTimeout(function(){
			$('input').eq(2).parent().next().remove()
		},2000)
	}

	//获取了第三个变量,列数tdCol

//第二步,设置$.get()方法的参数
	var getUrl = '0413work2.php'
	var getData = {    //data 给php传送的是ajax对象,属性名可以理解为php中用到的变量名,值会本js创造打变量名
		Title:taTitle, 
		Rows:trRows,
		Cols:tdCol
	}

	var getSuccess = function(data){ //回调函数,这里有参数,

		//回调函数就是在div。wrap标签后面创建新的表格,
		$('.wrap').next().remove() //这个就是先清空前面添加的内容
		$('.wrap').after(data)  // data就是要添加的表格数据,其最终格式是<table>行数和列数</table>

	}

	//$.get(getUrl,getData,getSuccess)

	//为了防止用户一个数据多次的提交,要设置一个标记变量,flag=1,用户提交之后flag=2,设置智能flag==1的时候才能提交数据,当flag==2的时候不能提交 

	var flag = 1 //这是标记变量,在提交数据前设置,赋值为1

	if (flag == 1) {
		$.get(getUrl,getData,getSuccess)
		//flag = 2
	}


})

//这里是重置按钮的函数
//重置就是把所有的输入框内的val()值变成空

$('button').eq(1).click(function(){
	$('input').eq(0).val('')
	$('input').eq(1).val('')
	$('input').eq(2).val('')
	$('input').eq(0).focus() //焦点回到第一个

})

})

</script>

运行实例 »

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

php脚本实例

<?php 
	//我把表格生成部分创造完了,现在在表格生成外面加上一层判断:如果提交的数据不符合要求,不生成表格,生成错误提示,所以做一个if-else语句
	if (!empty($_GET['Title']) and !empty($_GET['Rows']) and !empty($_GET['Cols'])) {
		# code...
		//获取数据操作
		//echo '<h2>表格标题'.$_GET['Title'].'</h2>';   //这里先理解,echo 返回的数据就显示在了调用本页的文件内

		/*$_GET[],这是一个数组,接收get()方式传入的数据,这些数据是一个数组,可以使用键的值访问,
		$_GET['data'],这样能找到键值为data的数据
		预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。
		*/
		//设置三个变量先接收传入的数据

		$Title = $_GET['Title'];//这就是表格的标题
		$Rows = $_GET['Rows'];//这就是表格的行数
		$Cols = $_GET['Cols']; //这就是表格的列数

		//echo $Title,$Rows,$Cols; //测试正确
		/*
		下面的逻辑,接受了前面的表格标题,表格行数,表格列数,最终要返回的是表格
		返回表格的html代码样式
		<table>
		<caption>这里是标题也就是数据$Title = $_GET['Title'];<caption>
		<tr><th></th></tr> 这是表头,表头的数量就是列数$Cols = $_GET['Cols']; 
		<tr><td></td></tr>这是表格内容,行数$Rows = $_GET['Rows'];,每行的单元数$Cols = $_GET['Cols'];
		</table>

		设置一个表格变量,期内用就是这些表格的html代码
		*/

		$Table = '<table border="1px solid gray" cellpadding="0" cellspacing="0" width="50%">';
		//创建表格变量,先赋值其基本的表格html代码,后面是使用  .= 形式,给其增加赋值内容  a .= b就是a = a . b
		$Table .= "<caption> <h3> {$Title} </h3> <caption><tr>"; //表格的标题,加上表头的开始标签
		//<tr><th></th></tr>,生成单个的th用循环
		for ($i=0; $i < $Cols; $i++) {   //
			$Table.= '<th>表头</th>';
		// 	# code...
		};
		$Table.= '</tr>';
		//下面写表格的主题部分<tr><td></td></tr>
		for ($r=0; $r < $Rows; $r++) {    //3   3
			$Table .= "<tr>";//先生成行的开始标签
			for ($d=0; $d < $Cols; $d++) {   //行的内部生成单元格,其个数就是列数
				$Table .= '<td>表格单元</td>';
				};
			$Table .= "</tr>";
		};
		//表格内容部分做完了,返回结果

		echo $Table.'</table>';
		exit();  //这里最好是空,里面有东西,还是会返回到前端
		// exit("<p style='color:green'>表格做完了<p>");//
		//exit() 函数输出一条消息,并退出当前脚本。

	} else {
		exit('请求错误');
	};

	
		


 ?>

运行实例 »

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