简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表格生成器2018.4.16 14:37
Blogger Information
Blog 14
fans 0
comment 0
visits 8537
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格生成器2018.4.16 14:37
弗洛加特的博客
Original
462 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实战：表格生成器</title>
    <style>
        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 class="title"><label for="">请输入标题：<input type="text" name="title"></label></p>
    <div class="content">
        <p><label for="">请输入行：<input type="text" name="rows"></label></p>
        <p><label for="">请输入列：<input type="text" name="cols"></label></p>
    </div>
    <p class="button"><button>生成表格</button><button>重置表格</button></p>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    //创建请求标志，防止重复请求
 var flag = true;
    $('button:first').on('click', function () {

//       第一步：遍历并验证用户输入的信息，
        //        标题非空，非数字判断
 if($('input[name="title"]').val().length == 0){
            $('input[name="title"]').after('<span style="color: red;">不能为空</span>');
            setTimeout(function () {
                $('input[name="title"]').next().remove();
            },2000)
            return false;
        }else if(!isNaN( $('input[name="title"]').val())){
            $('input[name="title"]').after('<span style="color: red;">不能是数字</span>');
            setTimeout(function () {
                $('input[name="title"]').next().remove();
            },2000)
            return false;
        }
//       行列信息判断使用each()方法
//        $(选择器).each(索引，当前对象相当于this)
        //行和列非空判断，非数字判断,非正数判断,添加提示词，使用定时器，2s后消失
 var flags = false;
        $('.content input').each(function (index,obj) {

            if($(obj).val().length==0){
                $(obj).after('<span style="color: red;">不能为空</span>');
                setTimeout(function () {
                    $(obj).next().remove();
                },2000)
                return flags = false;
            }else if(isNaN($(obj).val())){
                $(obj).after('<span style="color: red;">必须是数字</span>');
                setTimeout(function () {
                    $(obj).next().remove();
                },2000)
                return flags = false;
            }else if($(obj).val()<=0){
                $(obj).after('<span style="color: red;">必须大于零</span>');
                setTimeout(function () {
                    $(obj).next().remove();
                },2000)
                return flags = false;
            }else{
                flags = true;
            }
        });
        //each()方法结束后进行ajax请求，不能验证通过都返回false，只有验证通过才返回true，
        //  第二步：处理用户的请求，使用ajax
 if(flag == true && flags==true){
            $.get(
                'demo2.php',{
                    title:$('input[name="title"]').val(),
                    rows:$('input[name="rows"]').val(),
                    cols:$('input[name="cols"]').val(),
                }, function(data) {
                    $('p:last').after(data);
                    flag=false;
                }
            )
        }
    })
//重置按钮：清空标题，行和列；清空上次生成的表格，将光标置于第一个input上

 $('button:last').on('click',function(){
                $(':input').val('');
                $('.button').nextAll().remove();
                $(':input:first').focus();
                flag= true;
            })
</script>
</body>
</html>


实例
<?php


//判断用户的请求类型是否合法，必须是GET
if($_SERVER['REQUEST_METHOD'] == 'GET'){

    //如果用户发送的数据存在且不为空
    if(!empty($_GET['title'])){
        $title = '<p style="text-align: center;color: green;font-weight: bold;">'.$_GET['title'].'</p>';
    }
    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%">';
        //双重循环生成表格
//        1.生成表格表头
        $table.='<tr align="center" bgcolor="lightgreen">';
        for($i=0;$i<$cols;$i++){
            $table.='<th>表头</th>';
        }
        $table.='</tr>';
//        2.生成表格内容区
        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 $title.$table;
    }
}else{
    exit('<span style="color:red">非法请求</span>') ;
}


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

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


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！