用JavaScript格式化动态表

Formatting a dynamic table in JavaScript

本文关键字：动态 格式化 JavaScript      更新时间：2023-09-26

我有以下动态表：

dtable = "<table style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>";
dtable += "<td style='width: 100px;  text-align: right;'>" + Data["name"] + "</td></tr>";
                                
dtable += "<tr><td     style='width: 100px; text-align: right;'></td>";
dtable += "<td     style='width: 100px; text-align: right;'></td></tr>";
dtable += "<tr><td style='width: 100px; color: red;'> Status </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>";
dtable += "<td style='width: 100px;  text-align: right;'>" + Data["ID"] + "</td></tr>";
                                
dtable += "<tr><td     style='width: 100px; text-align: right;'></td>";
dtable += "<td     style='width: 100px; text-align: right;'></td></tr>";
dtable += "<tr><td style='width: 100px; color: red;'> Title</td>";

显示将分为两列，其中第一列包含Start和Name作为列第二列包含状态和ID。

我想在第一列和第二列之间设置一个边界。

我不能使用任何其他函数，如jQuery来计算和放置左列和右列的边界，因为这只是一个动态内容。

上表是否有任何修改，以分组并对其设置边界？我基本上是点击一个按钮，点击构建这个表并显示
编辑：数据表打字错误

这对我很有用。交替使用边框颜色和背景颜色。

<html>
    <script>
            function init(){
            var Data= {name:'bin', ID:7, status:'good', start:'today'}
            dtable = "<table class='TFtableCol' style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>";
    dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>";
    dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>";
    dtable += "<td style='width: 100px;  text-align: right;'>" + Data["name"] + "</td></tr>";
    dtable += "<tr><td     style='width: 100px; text-align: right;'></td>";
    dtable += "<td     style='width: 100px; text-align: right;'></td></tr>";
    dtable += "<tr><td style='width: 100px; color: red;'> Status </td>";
    dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>";
    dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>";
    dtable += "<td style='width: 100px;  text-align: right;'>" + Data["ID"] + "</td></tr>";
    dtable += "<tr><td     style='width: 100px; text-align: right;'></td>";
    dtable += "<td     style='width: 100px; text-align: right;'></td></tr>";
    dtable +="</table>"
    //dtable += "<tr><td style='width: 100px; color: red;'> Title</td>";   
    document.getElementById("d").innerHTML = dtable;
    } 
            </script>
    <body onload='init()'>

    <style type="text/css">
        .TFtableCol{
            width:100%; 
            border-collapse:collapse; 
        }
        .TFtableCol td{ 
            padding:7px; border:2px solid;
        }
        /* improve visual readability for IE8 and below */
        .TFtableCol tr{
            background: #b8d1f3;
        }
        /*  Define the background color for all the ODD table columns  */
        .TFtableCol tr td:nth-child(odd){ 
            background: #b8d1f3;
            border-color:Red;
        }
        /*  Define the background color for all the EVEN table columns  */
        .TFtableCol tr td:nth-child(even){
            background: #dae5f4;
            border-color:green;
        }
    </style>

    <form>
        <div id='d' style='width:600px'></div>
    </form>
    </body>
</html>
相关文章：