Blogger Information
Blog 41
fans 2
comment 1
visits 26164
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0413作业
郭恒的博客
Original
599 people have browsed it

生成带有标题的表格

实例 页面

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h3{
                color: red;
            }
            button{
                width: 60px;
                height: 20px;
                border: none;
                background-color: blue;
                color: white;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
<!--        <table>
            <tr>
                <th colspan="" rowspan=""></th>
            </tr>
        </table>-->
        <h3>我的表格生成器</h3>
        <p>标题:<input type="text" name="name" ></p>
        <p>行数:<input type="text" name="rows" ></p>
        <p>列数:<input type="text" name="cols" ></p>
        <p><button>生成</button><button>重置</button></p>
        <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script>
            //创建请求标志,防止重复请求
            var flag = true;
            $('button:first').on('click', function () {
//            alert(12)测试
                $(':input').eq(1).not('button').each(function (index, obj) {
                    if ($(obj).val().length == 0) {
                        $(obj).after('<span>不能为空</span>')
                        setTimeout(function () {
                            $(obj).next().remove()
                        }, 1000)
                        return false;
                    } else if (isNaN($(obj).val())) {
                        $(obj).after('<span>必须为数字</span>')
                        setTimeout(function () {
                            $(obj).next().remove()
                        }, 1000)
                        return false;
                    } else if ($(obj).val() <= 0) {
                        $(obj).after('<span>不能为0</span>')
                        setTimeout(function () {
                            $(obj).next().remove()
                        }, 1000)
                        return false;
                    }
                    //处理用户请求 ajax
                    if (flag == true) {
                        $.get('0413_2.php', {
                            rows: $('input[name = "rows"]').val(),
                            cols: $('input[name = "cols"]').val(),
                            name: $('input[name = "name"]').val()
                        }, function (data) {
                            $('p:last').next().remove()//用于清理上一个表格的内容
                            $('p:last').after(data)
                            flag = false;
                        })
                    }
                })
            })
            $('button').eq(1).click(function () {
                $(':input').not('button').val('')
                $(':input:first').focus()
                $('p:last').next().remove()
                flag = true
            })
        </script>
    </body>

</html>

运行实例 »

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

实例 PHP

<?php

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
        $rows = $_GET['rows'];
        $cols = $_GET['cols'];
        $name = $_GET['name'];
        $table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%" >';
        $table .= '<tr align="center" bgcolor="blue" >';     
        $table .= '<th colspan='.$cols.'>'.$name.'</th>'; 
        $table .= '</tr>';
//        echo $table;
        for ($g = 0; $g < $rows; $g++) {
            for ($f = 0; $f < $cols; $f++) {
                $df = $g*$cols+$f;
                $table .= '<td align="center">'.++$df.'</td>';
            }
            $table .='</tr>';
        }
        $table .= '<table>';
        echo $table;
    }
} else {
    exit('<span >非法请求</span>');
}
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

运行实例 »

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


Correction status:qualified

Teacher's comments:
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
  • 2018-03-16 15:12:44