Question

我正在使用JavaScript代码创建一个表格，使用document.createElement()从方法创建第二个表格。我使用Javascript创建One的方法有两种。

var dropDownTable = document.createElement('table');
    dropDownTable.id = "myTable";
    //dropDownTable.className = "myTable";
    var headerTr = document.createElement('tr');
    headerTr.className = 'header';
    var innerTr = document.createElement('tr');
    var innerTd = document.createElement('td');
    innerTr.appendChild(innerTd);
    dropDownTable.appendChild(headerTr);
    dropDownTable.appendChild(innerTr);

我将此作为outer.html

外部HTML

<table id="myTable">
    <tr class="header"/>
    <tr>
        <td/>
    </tr>
</table>

在Javascript中使用HTML标记。

var myTable = '<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>';

我将此作为outer.html

外部HTML

<table id="myTable">
    <tbody>
        <tr class="header" />
        <tr>
            <td/>
        </tr>
    </tbody>
</table>

我想知道我在哪里创建tbody标签。虽然我使用相同的CSS，但我的问题不同outer.html。请帮助我。

CSS

#tdiv {
    height: 30%;
    overflow-y: auto;
}

tbody {
    display: block;
}

tbody {
    max-height: 150px;
    overflow: auto;
}

#myTable {
    border-collapse: collapse;
    width: 30%;
    border: 1px solid #ddd;
    font-size: 18px;
    display: none;
    margin-top: -12px;
}

#myTable th,
#myTable td {
    text-align: left;
    padding: 12px;
    width: 10%;
}

#myTable tr {
    border-bottom: 1px solid #ddd;
    order-top: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
    background-color: #f1f1f1;
}

#myInput:focus+#myTable {
    display: block;
}

#myTable:hover {
    display: block;
}

Answer 1

我想知道我在哪里创建tbody标签。

浏览器会隐式创建它。

https://www.w3.org/TR/html5/tabular-data.html#the-tbody-element：

在text / html中标记遗漏：
如果tbody元素中的第一个元素是tr元素，并且元素不是紧跟在其末尾标记被省略的tbody，thead或tfoot元素之后，则可以省略tbody元素的开始标记。（如果元素为空，则不能省略。）。如果tbody元素后面紧跟tbody或tfoot元素，或者父元素中没有更多内容，则可以省略tbody元素的结束标记。

表体来自Html，但不是来自Javascript

1 个答案: