登录  /  注册
博主信息
博文 60
粉丝 0
评论 1
访问量 36018
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
4月13日作业 表格生成器
威灵仙的博客
原创
558人浏览过

HTML:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格生成器</title>
        <style type="text/css">
        h2 {
            color: green;
            margin-left:80px;
        }
        button {
            width: 80px;
            height: 30px;
            border: none;
            background-color: green;
            color:white;
            margin-left: 60px;

        }

        button:hover {
            cursor: pointer;
            background-color: coral;

        }
    </style>
</head>
<body>
    <h2>表格生成器</h2>
    <p><label for="title">请输入表格的标题:</label><input type="text" name="title" id="title" placeholder="选填"></p>
    <p><label for="rows">请输入表格的行数:</label><input type="text" name="rows" id="rows" placeholder="必填"></p>
    <p><label for="cols">请输入表格的列数:</label><input type="text" name="cols" id="cols" placeholder="必填"></p>
    <p><button id="submit">生成</button> <button id="reset">删除</button></p>
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">


    $("#submit").click(function(){
        $("input:gt(0)").each(function(){
            $(this).next().remove();
            if( $(this).val().length == 0){
                $(this).after("<span style='color:red;'>数据不能为空</span>");
                $(this).focus() ;
                return false ;
            }else if( $(this).val() == 0  ){
                $(this).after("<span style='color:red;'>数据必大于0</span>");
                $(this).focus() ;
                return false ;
            }else if( isNaN($(this).val()) ){
                $(this).after("<span style='color:red;'>数据必须是数字</span>");
                $(this).focus() ;
                return false ;
            }
        })


            $.get(
                "tableShow.php", //url

                {
                    title:$('input[name = "title"]').val(),
                    rows:$('input[name = "rows"]').val(),
                    cols:$('input[name = "cols"]').val()
                }, //data

                function(data){
                   //先将上一次生成的表格删除
                    $('p:last').next().remove()
                    //生成新的表格
                    $('p:last').after(data)
                } //sussess
            )


    })

    $("#reset").click(function(){
        $("#submit").not('button').val('') ;
        $("#submit").focus() ;
        $("p:last").next().remove() ;
    })


</script>

运行实例 »

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

PHP:

实例

<?php
    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 style="font-weight:bold; line-height:30px;">'.$title.'</caption>';
        $table .= '<tr align="center" bgcolor="lightgreen">';
        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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学