博主信息
jackallen的博客
博文
30
粉丝
2
评论
3
访问量
9901
积分:1
P豆:255

自动表格生成——2018年4月13日

2018年04月18日 16:35:27阅读数:282博客 / jackallen的博客/ php学习作业

表格实例如下:

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动生成表格工具</title>
    <style>
        h3 {
            color: green;
            margin-left: 40px;
        }

        button {
            border: none;
            background-color: green;
            margin-left: 40px;
            color: white;
            padding: 5px;
        }

        button:hover {
            background-color: lightgrey;
            color: black;
        }
    </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 src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    //创建标识,防止重复请求
    var flag = true;

    $('button:first').click('on', function () {
        //第一步:遍历并验证用户信息
        //$(选择器).each(对象索引,当前对象)
        $(':input').not('button').each(function (index, obj) {
            if ($(obj).val().length == 0) {            //非空判断
                $(obj).after('<span style="color: red">不能为空</span>')
                setInterval(function () {
                    $(obj).next().remove()
                }, 2000)
            } else if (isNaN($(obj).val())) {          //非数字判断
                $(obj).after('<span style="color: red">必须是数字</span>')
                setInterval(function () {
                    $(obj).next().remove()
                }, 2000)
            } else if ($(obj).val() <= 0) {            //非零判断
                $(obj).after('<span style="color: red">必须大于零</span>')
                setInterval(function () {
                    $(obj).next().remove()
                }, 2000)
                return false
            }
        })
        //处理用户请求
                if (flag == true) {
                    $.get(
                        'data.php',
                        {
                            title: $(':input[name="title"]').val(),
                            rows: $(':input[name="rows"]').val(),
                            cols: $(':input[name="cols"]').val()
                        },
                        function (data) {
                            $('p:last').next().remove()
                            $('p:last').after(data)
                            flag == false
                        })
                }
    });

    //重置按钮
    $('button').eq(1).click(function () {
        $(':input').not('button').val("");
        $('input').eq(0).focus();
        $('p:last').next().remove();
        flag = true;
    })
</script>
</body>
</html>

运行实例 »

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

实例

<?php
//判断用户的请求类型是否合法,必须是GET
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    //如果用户发送的数据存在且不为空
    if (!empty($_GET['title']) && !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 style="margin-bottom: 20px;font-size: 16px;font-weight:bold;color: green">' . $title . '</caption>';
        //生成表头
        $table .= '<tr align="center" bgcolor="#add8e6">';

        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>');
}

运行实例 »

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


批改状态:未批改

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论