表格生成器2018041718点08 - 直播课程学习

首页 > 博客列表 > 表格生成器2018041718点08

博主信息

博文 33

粉丝 3

访问量 22066

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格生成器</title>
	<!-- 页面样式 -->
	<style type="text/css">
		h3{
			margin-left: 80px;
			color: blue;
		}
		p button{
			margin-left: 30px;
			width: 80px;
			height: 26px;
			background: green;
			color:white;

		}	
	</style>
</head>
<body>
<!-- 	页面布局 -->
	<h3>表格生成器</h3>
	<p><label>输入标题：<input type="text" name="title" id="title"></label></p>
	<p><label>输入行：<input type="text" name="row"></label></p>
	<p><label>输入列：<input type="text" name="col"></label></p>
	<p><button>提交生成</button><button>重置表格</button></p>
	<table > </table>
</body>

<!-- jquery引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jquery代码 -->
<script type="text/javascript">
	// 设置防止重复提交标识
	var flag=true
	//获取按钮点击事件
	$('button:eq(0)').on('click', function() {
		//
	  //将页面全部input数据履历出来-标题单独判断是否为空
	   $('#title').each(function(index,obj){
	  	if ($(obj).val().length==0) {
            $(obj).after('<span style="color: red">标题不能为空</span>')
            setTimeout(function(){
            $(obj).next().remove()
            }, 1500)
            return false
	  	}

	  })
 //将页面全部input数据履历出来-用户输出行和列判断
	  $(':input').not('button,#title').each(function(index,obj){
	  	//录入内容不能为空判断
	  	if ($(obj).val().length==0) {
            $(obj).after('<span style="color: red">不能为空</span>')
            setTimeout(function(){
            	$(obj).next().remove()
            }, 1500)
            return false
	  	}
	  	//录入内容不能小于0
	  	else if ($(obj).val()<=0) {
	  		$(obj).after('<span style="color: red">必须大于0</span>')
	  		setTimeout(function(){
            	$(obj).next().remove()
            }, 1500)
            return false
	  	}
	  	//录入内容必须为数字
	  	else if (isNaN($(obj).val())) {
	  		$(obj).after('<span style="color: red">必须为数字</span>')
	  		setTimeout(function(){
            	$(obj).next().remove()
            }, 1500)
            return false
	  	}
	 

	  })
	//判断完成后提post提交后台
	  if (flag=true) {
	  		 $.get('a.php', {
	  		 	row:$('input[name="row"]').val(),
	  		 	col:$('input[name="col"]').val(),
	  		 	title:$('input[name="title"]').val()
	  		 }, function(data){
	  		 	//删除上次提交的数据
	  		 	$('p:last()').next().remove()
	  		 	//重新生成表格
               $('p:last()').after(data)
               //防止重写状态改变一下
                flag=false
	  		 })

             
             
	  		 
	  	}

	});

	//删除按钮功能实现
	$('button:eq(1)').on('click',function(){
		$(':input').not('button').val('')//清除页面内容
		$('input:eq(0)').focus()
		$('p:last').next().remove()
	});

		
	


</script>
</html>

运行实例 »

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

实例

<?php 
if ($_SERVER['REQUEST_METHOD']=="GET")
//判断请求方式必须是get
 {
 	if (!empty($_GET['row'])&& !empty($_GET['col'])&& !empty($_GET['title'])) 
 	{
 		$title=$_GET['title'];
 		$row=$_GET['row'];
 		$col=$_GET['col'];
 	$table='<table style="width: 80%" cellpadding="3px" cellspacing="0px" border="1px">'."<caption>{$title}</caption>";
 	//表格标题部分，生成一行N列
 	$table.='<tr>';
 	for ($i=0; $i <$col ; $i++) { 
 		$table.='<td>X</td>';
 	}
 	$table.='</tr>';

 	for ($r=0; $r < $row; $r++) { 
 		$table.='<tr>';
 		for ($c=0; $c < $col; $c++) { 
           $table.='<td>内容</td>';
 		}
 		$table.='</tr>';
 	}



	echo $table;
	exit();
 }
 else {
 	exit('<span style="color: red">数据为空</span>');
 }

	
}
else {
	
}

 ?>

运行实例 »

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