博客列表 >php制作一个表格自动生成器

php制作一个表格自动生成器

php学习笔记
php学习笔记原创
2018年04月16日 15:48:335696浏览

用php制作一个表格自动生成器,输入表格标题、表格行数、表格列数就能自动生成一个几行几列的表格。

下面用实例来演示一下:

index.php代码如下:

实例

<!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-left: 30px;
		}
	</style>
</head>
<body>
	<h3>表格生成器</h3>
	<p><label>输入标题:<input type="text" name="title"></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="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(){
			if($('input:first').val().length == 0){
				$('input:first').after('<span style="color:red">不能为空</span>')
				setTimeout(function(){
                         $('input:first').next().remove()
					},2000)
					return false
			}
			$(':input').not('button').not('input:first').each(function(index,obj){
				if($(obj).val().length == 0){
					$(obj).after('<span style="color:red">不能为空</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
				}else if($(obj).val() <= 0){
                      $(obj).after('<span style="color:red">必须大于0</span>')
					setTimeout(function(){
                         $(obj).next().remove()
					},2000)
					return false
				}
			})
			if(flag == true){
				$.get('table.php',{
					 title:$('input:first').val(),
                     rows:$('input[name="rows"]').val(),
                     cols:$('input[name="cols"]').val()
				},function(data){
					$('p:last').after(data)
					flag = false
				})
			}
		})
		$('button:last').click(function(){
			$(':input').not('button').val('')
			$(':input:first').focus()
			$('p:last').next().remove()
			flag = true
		})
	</script>
</body>
</html>

运行实例 »

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

table.php代码如下:

<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
    if(!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['title'])){
    	$rows = $_GET['rows'];
    	$cols = $_GET['cols'];
    	$title = $_GET['title'];
    	$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
    	$table .= '<caption>'.$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;
                 $table .= '<td align="center">'.++$data.'</td>';
            }
    		$table .= '</tr>';
    	}
    	$table .= '</table>';
    	echo $table;
    }
}else{
	exit('<span style="color:red">非法请求</span>');
}


运行结果:

2018-04-16_152737.png


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