JavaScriptタグからテーブルを作成しています。document.createElement()
を使ってメソッドから2番目のテーブルを作成しています.Javascriptを使用して1つを作成する方法は2通りあります。ここでテーブルボディはHtmlから来ていますが、JavaScriptから来ていません
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);
私はJavaScriptでHTMLタグを使用してouter.html
外HTML
<table id="myTable">
<tr class="header"/>
<tr>
<td/>
</tr>
</table>
一つとしてこれを取得しています。ここで
var myTable = '<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>';
私はTBODYタグを作成していますどこ私は疑問に思ってouter.html
外HTML
<table id="myTable">
<tbody>
<tr class="header" />
<tr>
<td/>
</tr>
</tbody>
</table>
としてこれを取得しています。私は同じCSSを使用していますが、違いはouter.html
は私の質問です。これで私を助けてください。私はTBODYタグを作成していますどこ私は疑問に思って
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;
}