博客列表 >表格自动生成器—4月13日

表格自动生成器—4月13日

→忆指凡尘&的博客
→忆指凡尘&的博客原创
2018年04月16日 19:04:17651浏览

大家好

       以下是我对表格自动生成器的练习,如有错误望大家指出

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格生成</title>
	<style type="text/css">
		h3 {
			color: green;
			margin-left: 70px;
		}
		button {
			background-color: lightblue;
			border: none;
			color: white;
			margin-left: 20px;
		}
		button:hover{
			background-color: blue;
			font-size: 1.05em;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h3>表格生成器</h3>
	<p>表格标题: <input type="text" name="title"></p>
	<p>输入行: <input type="text" name="rows"></p>
	<p>输入列: <input type="text" name="cols"></p>
	<p><button>生成表格</button><button>重置表格</button></p>
</body>
<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').click(function(){
		//第一步:遍历并验证用户的输入信息	
			//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
		$(':input').not('button').not('input:first').each(function(index,obj){
			//非空判断
			if ($(obj).val().length == 0) {
				$(obj).after('<span style="color:red">不能为空</span>')
				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(
				//url地址
				'demo.php',
				// 发送的请求参数
				{
					rows:$('input[name="rows"]').val(),
					cols:$('input[name="cols"]').val(),
					title:$('input[name="title"]').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:允许用户请求
		flag = true

	})
</script>
</html>

运行实例 »

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

实例

<?php
//判断用户的请求类型是否是GET请求
if ($_SERVER['REQUEST_METHOD'] =='GET'){
	//如果用户发送的数据全部存在且不为空
	if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
		//用较短的变量名称进行转存
		$rows = $_GET['rows'];
		$cols = $_GET['cols'];
		$title = $_GET['title'];
		//创建表格的基本架构,采用字符串拼接方式,最后统一生成
		$table = '<table border = "1" cellspacing = "0" cellpadding="3" width = "70%" align = "center">';
		$table .= '<caption style="font-size:30px">'.$title.'</caption>';
		//生成表头
		$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>');
}

运行实例 »

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

                                                                                   课程总结

1.遍历 each 的用法—$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象

2.创建请求标志,防止重复请求的用法

3.怎么判断用户的请求类型—$_SERVER['REQUEST_METHOD'] == ‘GET’

4.设置单元格的数据,数据与单元格数量对应的公式—$data = $r*$cols+$c;

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