2017-06-14 6 views
0

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

答えて

1

ブラウザで暗黙的に作成されます。

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

タグの省略:TBODY要素内の最初のものはtr要素である場合、その要素がない場合は
のtbody要素の開始タグを省略することができます終了タグが省略されたtbody、thead、またはtfoot要素が直前に置かれています。 (要素が空の場合は省略できません)。 tbody要素の直後にtbodyまたはtfoot要素が続く場合、または親要素にコンテンツがもうない場合は、tbody要素の終了タグを省略できます。

関連する問題