总结:

1创建请求标志,防止请求重复

获取inpu然后用each循环遍历取到的jq对象

如果对象等于0 非空判断 判断是否等于0 判断是否为数字 操作一样


2处理用户的请求 Ajax

使用get请求

请求成功的回调函数

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 360px;
		border: 1px solid black;
		background-color: #faebd7;
	}
	h2{
       color: red;
       margin-left: 80px;
	}
	label{
		padding: 10px;
	}
	button{
		width: 80px;
		height: 30px;
		color: white;
		background-color:#00ffff;
		border: none;
		margin-left: 50px;
	}
	</style>
</head>
<body>
	<div>
	<h2>在线制作表格</h2>
	<p><label>请输入行:<input type="rows" name=""></label></p>
	<p><label>请输入列:<input type="cols" name=""></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">
//创建请求标志,防止请求重复
var flag = true
//获取第一个按钮
$('button:first').on('click',function(){
	//获取inpu然后用each循环遍历取到的jq对象
$(':input').not('button').each(function(index,obj){
	// alert($(obj).val()) //检查可否获取到值
	//如果对象等于0 非空判断
	 if ($(obj).val().length == 0) {
		//在文本框后显示提示信息
		 $(obj).after('<span style="color:red">不能为空.猪</span>')
		 setTimeout(function(){
		 	$(obj).next().remove()
		 },2000)
		 return false
		 //判断是否等于0 操作一样
	}else if ($(obj).val() <= 0) {
		$(obj).after('<span style="color:red">必须大于0</span>')
		setTimeout(function(){
			$(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
				}
})
//2处理用户的请求 Ajax
if (flag == false) {
	//使用get请求
	$.get(
		//1请求处理的脚本
		'demo2.php'
		//2发送的请求参数
		{
          rows : $('input[name="rows"]').val(),
          cols : $('input[name="cols"]').val()
		},
		//请求成功的回调函数
		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;
})

</script>

运行实例 »

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

实例

<?php
// 判断用户的请求是否合法
if ($_SERVER['REQUEST_METHOD'] =='GET') {
	if (!empty($_GET['rows']) && !empty($_GET['cols'])){
	$rows = $_GET['rows'];
	$cols = $_GET['cols'];
	//创建表格的基本结构
	$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
	//下面用双重循环生成表格
	//1生成表头
	$table = '<tr align="center" background-color="lightgreen">';
	for ($r=0; $r<$rows; $c++){
		$table = '<th> 1 </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>')
}

运行实例 »

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

3重置按钮

0/300
全部评价