Question

我有以下动态表：

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>";

显示屏将分为两列，其中第一列包含开始和名称作为列第二列包含状态和 ID 。

我想在第一列上设置边框，在第二列上设置边框。

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

上表是否有任何改动以对其进行分组并设置边界？我基本上是单击一个按钮，然后单击构建此表并显示。编辑：dtable拼写

Answer 1

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

<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>

在javascript中格式化动态表

1 个答案: