javascript - 如何将 CSS 合并到表格中

Question

我想将 CSS 代码放入我的表格中，但不想在表格的每一行都设置样式。我有以下代码:

CSS:

.statetable th
{
    width: 250px;
    color: red;
    text-align: left;
}
.statetable tr
{
    width: 250px;
}

JavaScript:

function showState()
{       
    myTable = "<table class='statetable'><br><th><td>Type</td>";
    myTable += "<td>Value</td></th>";

    createRow("------------------", "------------");
    createRow("Layout", (document.getElementById("startradio").form.format == "Default"));
    myTable +="</table>";
    document.getElementById("tableHolder").innerHTML = myTable;
}

function createRow(type, value)
{
    myTable += "<table class='statetable'><tr><td>" + type + "</td>";
    myTable += "<td>" + value + "</td></tr>";
}

HTML:

 <input type="button" id="button" value="Click to show states" onclick="showState()"/>
 <div id="tableHolder"></div>

虽然样式不起作用。我已经放置了我的 th 和 tr，并将 css 与它们一起放置，但我不确定我做错了什么。

Answer 1

替换这些:

myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";

有了这些:

myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";

此外，在 createRow 中，替换:

myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";

与:

myTable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";