在javascript中格式化动态表答案

【问题标题】：Formatting a dynamic table in javascript在javascript中格式化动态表
【发布时间】：2016-03-15 00:34:39
【问题描述】：

我有以下动态表：

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 作为列第二列包含 Status 和 ID。

我想在第一列和第二列加上边框。

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

上表的分组和边框是否有任何更改？我基本上是单击一个按钮，然后单击构建此表并显示。已编辑：dtable 错字

【问题讨论】：

里面的dcontent有错别字吗？
dcontent 只是“var”
我不知道这意味着什么 - 但很奇怪你将一个大长字符串连接到 dtable 并且在中途将一个单元格放入 dcontent。
抱歉打错了，dcontent打错了

标签： javascript css html javascript-events

【解决方案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>

【讨论】：