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




 ?>

运行实例 »

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