4月13日————表格生成器——8时09分

代码如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格自动生成器</title>
	<style type="text/css">
		body{
			background-color: seagreen;

		}
		h3{
			padding-left: 50px;
			color: black;

		}
		button{
			margin-left: 50px;
			color: black;
			border: none;
			background-color: lightpink;
		}
		span{
			padding-left: 40px;

		}
		table{
			width: 80%;
			
		}
	</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').click(function(){
			// alert(1)
			$(':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
				}
				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">必须大于零</span>')
				setTimeout(function(){
					$(obj).next().remove()
				},2000)
				return false			
				}
				if(flag==true){
					$.get('demo2.php',{
					rows : $('input[name="rows"]').val(),
					cols : $('input[name="cols"]').val()
				},function(data){
					$('p:last').after(data)
					flag = false
				})
				}
		})
			$("").click(function(){
       	 	$("#submit").not('button').val('') ;
       		$("#submit").focus() ;
        	$("p:last").next().remove() ;
    })
		})

	</script>
</body>
</html>

运行实例 »

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

实例

<?php
		ini_set("display_errors", "On");
		error_reporting(E_ALL | E_STRICT);
    	if ( $_SERVER['REQUEST_METHOD'] == 'GET') {
        if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
         $title = $_GET['title'];
        $rows = $_GET['rows'];
        $cols = $_GET['cols'];
        $table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
        $table .= '<caption>'.$title.'</caption>';
        $table .= '<tr align="center" bgcolor="lightgray">';
        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;
        exit();
    }
} else {
    exit('<span style="color:red">报错，非法请求</span>');
}

 ?>

运行实例 »

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

效果图：

31JBM~0%9SS~WDT4)@6VW]4.png

实例

实例

相关文章