<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <meta charset="UTF-8">
    <title>表格生成器</title>
    <style type="text/css">
        .box button{
            width: 90px;
            height: 30px;
            background-color: lightgreen;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>表格标题: <input type="text" id="table_title" placeholder="表格标题"></p>
        <p>表格行数: <input type="text" id="table_rows" placeholder="表格行数"></p>
        <p>表格列数: <input type="text" id="table_cols" placeholder="表格列数"></p>
        <p><button id="creat">生成表格</button>&nbsp;&nbsp;<button id="resert">重置表格</button></p>
    </div>
</body>
<script type="text/javascript">
    //添加点击方法
 $('#creat').on('click',function () {
        $(':input').not('input:first').not('button').each(function (index,obj) {
            $(obj).next().remove();
            if($(obj).val().length==0){//行数、列数不能为空
 $(obj).after('<span style="color: red">不能为空</span>');
                return;
            }else{
                if(isNaN($(obj).val())){//行数、列数值只能为数字
 $(obj).after('<span style="color: red">只能为数字</span>');
                    return;
                }else{
                    if($(obj).val()<=0){
                        $(obj).after('<span style="color: red">必须大于0</span>');
                        return;
                    }
                }
            }
        });
        $.get('index.php',{
            rows:$('#table_rows').val(),
            cols:$('#table_cols').val(),
            title:$('#table_title').val(),
        },function (data) {
            $('p:last').next().remove();
            $('p:last').after(data);
        });
    });
</script>
</html>
<?php
/**
 * Created by PhpStorm.
 * User: spdbcc
 * Date: 2018/4/16
 * Time: 上午9:27
 */
if($_SERVER['REQUEST_METHOD']=='GET'){
    if(!empty($_GET['rows']) && !empty($_GET['cols'])){
        $rows = $_GET['rows'];
        $cols = $_GET['cols'];
        $table = '<table cellspacing="0" cellpadding="2" align="center" border="1">';
        if(!empty($_GET['title'])){
            $table.="<caption>{$_GET['title']}</caption>";
        }
        for ($i=1;$i<$cols+1;$i++){
            $table .="<th width='100px'>第{$i}列</th>";
        }
        for ($j=0;$j<$rows;$j++){
            $table.='<tr>';
                for($k=0;$k<$cols;$k++){
                    $data = $j*$cols+$k;
                    ++$data;
                    $table.="<td>{$data}</td>";
                }
            $table.='</tr>';
        }
        echo $table;
    }
}else{
    echo '<span>非法请求</span>';
}


0/300
全部评价