なぜChromeは各テーブル行にtbodyタグを追加するのですか？

Question

私は2つのテーブルをいっぱいにしてイベントをスローします。

スタイルシートは、偶数行が白く塗られるように作られています。

table { 

border-collapse: collapse; 
width: 100%; 

} 

td, th { 
border: 1px solid #dddddd; 
text-align: left; 
padding: 8px; 
} 

tr:nth-child(even) { 
background-color: #dddddd; 
} 

しかし、原因Chromeは、それが動作しないのです各trタグにtbodyタグを追加します。

var prueba = {}; 
    prueba = nuevaCadena[nuevaCadena.length - 1].replace(/<br>/g, "").split(","); 
    prueba.venta = prueba[0]; 
    prueba.fecha = prueba[1]; 
    prueba.heladeria = prueba[2]; 

    //prueba.base.split(","); 

    //if (myElem === null) { 
    var contenido = document.getElementById("contenido"); 
    var tr2 = document.createElement("TR"); 


    if (contenido.getElementsByTagName("TH").length === 0) 
    { 
     contenido.appendChild(tr2); 
     tr2.innerHTML += "<th>Heladeria</th>"; 
     tr2.innerHTML += "<th>Fecha</th>"; 
     tr2.innerHTML += "<th>ID</th>"; 

    } else { 
     var template = "<tr><td>{{heladeria}}</td><td>{{fecha}}</td><td>{{venta}}</td></tr>"; 

     document.querySelector('#contenido').innerHTML +=  Mustache.render(template, prueba); 

    } 

、完全に二作品：

最初の表は、スローバックエンドを埋めます。それはselectタグ値を埋めることです。この質問は、私は口ひげを使用Why do browsers insert tbody element into table elements?私のために動作しませんでした

：

var contenido = document.getElementById("contenido2"); 
var tr2 = document.createElement("TR"); 

var tr = document.createElement("TR"); 
if (contenido.getElementsByTagName("TH").length === 0) 
{ 
contenido.appendChild(tr2); 
tr2.innerHTML += "<th>Heladeria</th>"; 
tr2.innerHTML += "<th>Fecha</th>"; 
tr2.innerHTML += "<th>Sabor</th>"; 
tr2.innerHTML += "<th>Cantidad</th>"; 

} 



contenido.appendChild(tr); 

//var th = document.createElement("TD"); 
var option = ["heladerias", "sabores"]; 
var valor = document.getElementById("sabor_calorias"); 
var fecha = document.getElementById("fecha"); 


for (var i = 0; i <= 0; i++) { 

var input = document.getElementById(option[i]).selectedIndex; 
var input2 = document.getElementById(option[i]).options; 

tr.innerHTML += "<td>" + input2[input].text + "</td>"; 
tr.innerHTML += "<td>" + fecha.value + "</td>"; 

for (var j = 1; j <= 1; j++) { 

    input = document.getElementById(option[j]).selectedIndex; 
    input2 = document.getElementById(option[j]).options; 
    tr.innerHTML += "<td>" + input2[input].text + "</td>"; 
    tr.innerHTML += "<td>" + valor.value + "</td>"; 
    tr.innerHTML += "<input type='button' class='borrar' value='x'   onclick='deleted(this)'/>"; 

} 


} 

結果がこれです。

Answer 1

追加クロムのタグが必要とされていない、とあなたのコードに影響を与えるべきではありません。

エラーが発生し続ける場合は、見つからない文字がないことを確認してください。

Answer 2

Why do browsers still inject <tbody> in HTML5?で説明されているように、HTML構文を解析するとき、ブラウザはtbodyタグを挿入します。毎回innerHTMLに追加することで、毎回新しいtbodyを作成しています。 HTML構文では、trを表の直接の子として表すことはできません。

あなたはまだinnerHTMLプロパティを持つ行を書き込み、または同様td = tr.insertCell()を使用したい場合は、代わりに

tr = table.insertRow() 
tr.innerHTML='<td>foo<td>bar' 

を使用することができます。