PHP 创建 TABLE表格 DOM操作TABLE

在HTML中, 可以用JQ去操作DOM, 动态解析JSON数据建立表格.  AJAX拿到json数据,  也是可以动态增加或修改表格

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM操作TABLE</title>
        <style type="text/css">
            .table-container{
            
                }
            
                caption{
                    padding: 10px;
                    font-size: 30px;
                    font-weight: bold;
                }
            
                table{
                    border-collapse: collapse;
                    width: 80%;
                    margin: 0px auto;
                    border: 1px solid #ddd;
                }
            
                th, td{
                    padding: 10px 10px;
                    text-align: center;
                }
                /* th固定在窗口顶部 */
                th{
                    position: -webkit-sticky;
                    position: sticky;
                    top: 0;                     
                    background-color: #03A9F4;
                    color: #FFF;
                    border: 1px solid #ddd;
                }
            
                table tr:nth-child(odd){
                    background-color: #F2F2F2; /* 奇数行背景颜色 */
                }
                table tr:nth-child(even){
                    background-color: #F9F9F9; /* 奇数行背景颜色 */
                }
        </style>
        <script src="https://config.net.cn/tools/static/Main/jquery.min.js"></script>
        <script type="text/javascript">
            var stu = [
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
              ];
                    /**
                    *
                    1.Js直接解析JSON; 
                    2.AJAX去获取JSON(不跨域); 
                    3.PHP中用cURL函数去获取JSON(任何URL) 
                    *
                    **/
              $(document).ready(function() {
                var s = "";
                for(var i = 0; i < stu.length; i++) {
                    id = i+1;
                    tr = "<tr>";
                    td = "<td>" + id + "</td><td>" + stu[i].name + "</td><td>" + stu[i].sex + "</td><td>" +
                    stu[i].age + "</td></tr>";
                    $("#tab").append(tr + td);
                }
              });
        </script>
    </head>
    <body>
        <div class="table-container">
            <table id="tab" border="1" cellspacing="0">
                <caption id="caption">caption<span id="p2" style="font-size: 16px;"> 自动刷新!<a href="?id=1">caption</a>
                    </span>
                </caption>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>name</th>
                        <th>sex</th>
                        <th>age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>文字描述</td>
                        <td>文字描述</td>
                        <td>文字描述</td>
                        <td>文字描述</td>
                    </tr>
                </tbody>
                <tfoot id="tfoot">
                    <tr style="background: #785d35;color: #FFF;">
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>
View Code

 在PHP中, foreach循环ehco输出表格html代码,  但在网页中查看源代码不规范,我们封装一个PHP函数,  在html代码前加几个 /t  制表符,  结尾增加换行符PHP_EOL;

//用法 echoTab('abcdefg;', 2);
function echoTab($data, $tab = 1){
    $data = str_repeat("\t", $tab).$data.PHP_EOL;
    echo $data;
}

案例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM操作TABLE</title>
        <style type="text/css">
            .table-container{
            
                }
            
                caption{
                    padding: 10px;
                    font-size: 30px;
                    font-weight: bold;
                }
            
                table{
                    border-collapse: collapse;
                    width: 80%;
                    margin: 0px auto;
                    border: 1px solid #ddd;
                }
            
                th, td{
                    padding: 10px 10px;
                    text-align: center;
                }
                /* th固定在窗口顶部 */
                th{
                    position: -webkit-sticky;
                    position: sticky;
                    top: 0;                     
                    background-color: #03A9F4;
                    color: #FFF;
                    border: 1px solid #ddd;
                }
            
                table tr:nth-child(odd){
                    background-color: #F2F2F2; /* 奇数行背景颜色 */
                }
                table tr:nth-child(even){
                    background-color: #F9F9F9; /* 奇数行背景颜色 */
                }
        </style>
        <script src="https://config.net.cn/tools/static/Main/jquery.min.js"></script>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <div class="table-container">
            <table id="tab" border="1" cellspacing="0">
                <caption id="caption">caption<span id="p2" style="font-size: 16px;"> 自动刷新!<a href="?id=1">caption</a>
                    </span>
                </caption>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>name</th>
                        <th>sex</th>
                        <th>age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>文字描述</td>
                        <td>文字描述</td>
                        <td>文字描述</td>
                        <td>文字描述</td>
                    </tr>
<?php
$stuJson =  '[
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "张三", "sex": "男", "age": "20" },
                { "name": "李四", "sex": "男", "age": "18" },
                { "name": "王五", "sex": "男", "age": "19" }
            ]';

function jsonToArray($data){
    $data = json_decode($data,JSON_UNESCAPED_UNICODE);
    return $data;
}

//用法 echoTab('abcdefg;', 2);
function echoTab($data, $tab = 1){
    $data = str_repeat("\t", $tab).$data.PHP_EOL;
    echo $data;
}

$stuArr = jsonToArray($stuJson);
$i = 100;
foreach($stuArr as $row){
                echoTab('<tr>', 5);
                    echoTab("<td>{$i}</td>", 6);
                    echoTab("<td>{$row['name']}</td>", 6);
                    echoTab('<td>'.$row['sex'].'</td>', 6);
                    echoTab('<td>'.$row['age'].'</td>', 6); 
                echoTab('</tr>', 5);
    $i++;
}

$k = 200;
foreach($stuArr as $row){
    echoTab('<tr>', 5);
    echoTab("<td>{$k}</td>", 6);
    foreach($row as $col){
        echoTab("<td>{$col}</td>", 6);
    }
    echoTab('</tr>', 5);
    $k++;
}

$k = 300;
foreach($stuArr as $row){
    echo '<tr>';
    echo '<td>'.$k.'</td>';
    foreach($row as $col){
        echo '<td>'.$col.'</td>';
    }
    echo '</tr>';
    $k++;
}
?>
                </tbody>
                <tfoot id="tfoot">
                    <tr style="background: #785d35;color: #FFF;">
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>
View Code

 

posted @ 2024-07-14 08:54  钢锅  阅读(20)  评论(0)    收藏  举报