欢迎访问我的个人网站==》 jiashubing.cn

使用js 动态创建表格（代码库）

js 数组创建 HTML 列表

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="../trd/jquery/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function onLoginLoaded() {
            var protocolList;
            $('#p2').html('Cookie 名称')
            $('#p3').html('说明')
            document.title = "Cookie清单";
            protocolList = [
                {title: 'timezone', content: '时区'},
                {title: 'languages', content: '支持语种列表'},
                {title: 'language', content: '当前语种'}
            ];
            var htmlStr = "";
            $.each(protocolList, function (i, item) {
                htmlStr += "<tr><td><p><span class=\"ocpNoLoc\">" + item.title + "</span></p></td><td><p>" + item.content + "</p></td></tr>";
            });
            $('#protocolBody').html(htmlStr);
        }
    </script>
    <style>
        .grd *,.grd *:before,.grd *:after{box-sizing:border-box}table{display:table;border-collapse:separate;box-sizing:border-box;text-indent:initial;border-spacing:2px;border-color:gray}table.banded{border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;margin:10px auto 20px}table{border-collapse:collapse;border-bottom:0;width:50%;padding:0;line-height:normal}th{display:table-cell;vertical-align:inherit;font-weight:bold;text-align:-internal-center}tr{display:table-row;vertical-align:inherit;border-color:inherit}td{padding:4px 10px 4px 10px;margin:0;vertical-align:top;display:table-cell}p{margin-top:12px;margin-bottom:12px;font-family:"Segoe UI","Segoe UI Web","wf_segoe-ui_normal","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;font-size:15px;line-height:1.5}table tr{background-color:#f4f4f4;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;vertical-align:top}
    </style>
</head>

<body style="margin: 0;">
<div id="content_div" class="content_div">
    <div class="selectParent">
        <div id="content" class="content">
            <table aria-label="" class="banded flipColors">
                <thead>
                <tr>
                    <th>
                        <p id="p2"></p>
                    </th>
                    <th>
                        <p id="p3"></p>
                    </th>
                </tr>
                </thead>
                <tbody id="protocolBody">

                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

 

posted @ 2024-02-28 17:23  贾树丙  阅读(14)  评论(0)  编辑  收藏  举报