博客列表 >0413课后作业

0413课后作业

张成钢的博客
张成钢的博客原创
2018年04月20日 08:50:41766浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格生成器</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="rows" id="tRow"></label></p>
	<p><label>输入列:<input type="text" name="cols" id="tCol"></label></p>
	<p><button>生成表格</button><button>重置行列</button></p>

	<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(){
			$(':input').not('button').each(function(index,obj){
				if ($(obj).val().length == 0) {
					$(obj).after('<span style="color:red">不能为空!</span>')
					setTimeout(function(){$(obj).next().remove()},2000)
					return false
				}

				if (isNaN($(obj).val())) {
					$(obj).after('<span style="color:red">必须是数字!</span>')
					setTimeout(function(){$(obj).next().remove()},2000)
					return false
				}

				if ($(obj).val() <= 0 ) {
					$(obj).after('<span style="color:red">必须大于0!</span>')
					setTimeout(function(){$(obj).next().remove()},2000)
					return false
				}

			 })

			$.get(
				// 1.处理的脚本
				'svr0413.php', 
				{
						// rows: $('input[name="rows"]').val(),
						// cols: $('input[name="cols"]').val()
						rows: $('#tRow').val(),
						cols: $('#tCol').val()						
				}, 
				function(data){
					// alert('hello')
					$('p:last').next().remove()
					$('p:last').after(data)
				})
		})

			//第二点:处理用户的请求(Ajax实现)
			// if (flag == true) {
			// 	if (flag >= 0) {
			// 		 alert('hello')
			// 	$.get(
			// 		//1.请求处理的脚本
			// 		'svr0413.php',
			// 		//2.发送的请求参数
			// 		{
			// 			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:text').val('')
			$('#tRow').focus()
			$('p:last').next().remove()
			// flag = true
		})

	</script>	


</body>
</html>

运行实例 »

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

实例

<?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%">';
		
		//0.表格标题
		$table .= '<caption><h3 style="color:red">表格标题</h3></caption>';		
		//1生成表头
		$table .= '<tr align="center" bgcolor="lightgreen">';

		for ($i=0; $i < $cols; $i++) { 
			$tmp = $i + 1;			
			$table .= '<th>title'.$tmp.'</th>';
		}
		$table .= '</tr>';

		//2.增加内容
		for ($i=0; $i < $rows; $i++) {
			if ($i%2 == 1) {
				$table .= '<tr bgcolor="skyblue">';
			}
			else {
				$table .= '<tr>';
			}
			for ($j=0; $j < $cols; $j++) { 
				$no = $i * $cols + $j;
				++$no;
				$data = '单元格';
				$data .= $no;
				$table .= '<td align="center">'.$data.'</td>';
			}
			$table .= '</tr>';
		}

		$table .= '</table>';

		//将生成的表格返回到客户端
		echo $table;

 	}
}  else {
	exit('<span style="color:red">请求类型错误!</span>');
}

  ?>

运行实例 »

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


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