Why Chrome adds tbody tag to each table row?

Question

I have two tables that fill up throw an event.

The stylesheet is made for that the even rows get painted white.

table {

border-collapse: collapse;
width: 100%;

}

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

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

But due Chrome adds tbody tag to each tr tag it's doesn't work.

The first table fill up throw back-end:

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

   }

And the second works perfectly. It's fill up throw the select tag values.

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)'/>";

}


}

The results are this:

This question didn't work for me Why do browsers insert tbody element into table elements? i use Mustache.

Screenshot of Table

Screenshot of Chrome adding tbody

https://i.stack.imgur.com/dWfWd.png is in the link above "Chrome adding tbody" — TOMAS, Feb 14 '17 at 19:25
@TOMAS ah ok, thanks. Just as a point - it's not considered good practice to include code as images/screenshots — CalvT, Feb 14 '17 at 19:27
@bitsoflogic No, that question doesn't solve the problem in any way it just explained.. NO solutions... — TOMAS, Feb 14 '17 at 20:29
Sorry, but that JavaScript code is irrelevant. Show the final HTML as it goes over the wire, _not_ the parsed DOM as displayed in the browser. — Svante, Feb 14 '17 at 21:21
have you tried to start with : `

` instead `

` so tbody is already there — G-Cyrillus, Feb 14 '17 at 21:54
I have just done that a moment a go and it works. It seems to be that it is not posible to avoid `tbody` using Mustache. — TOMAS, Feb 14 '17 at 23:12

Josh Lee · Answer 1 · 2017-02-14T19:53:09.863

3

When parsing the HTML syntax, the browser will insert a tbody tag, as explained in Why do browsers still inject <tbody> in HTML5?. By appending to the innerHTML each time, you're creating a new tbody each time. The HTML syntax can't represent a tr as a direct child of a table.

You could instead use

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

if you still wanted to write the row with innerHTML, or use td = tr.insertCell() as well.

edited Feb 14 '17 at 19:53

answered Feb 14 '17 at 19:31

Josh Lee

171,072
38
269
275

Ok. but check the last table is create with inner and doesn' t have the same problem .. I try to add the `` tag individuality `tr.inner += "{{heladeria}}"` and the problem is solved but Mustache doesn't fill the `{{}}` tags – TOMAS Feb 14 '17 at 19:56

score 0 · Answer 2 · answered Feb 14 '17 at 19:22

0

The tags that chrome add are not needed, and shouldn't affect your code.

If you keep getting the error you might want to try going through to make sure you don't have any missed-placed characters.

answered Feb 14 '17 at 19:22

AlphaGamer150

15
4

But they are affecting his code - they mess with `nth-child` in CSS – CalvT Feb 14 '17 at 19:26
They shouldn't. – AlphaGamer150 Feb 14 '17 at 19:30
tbody:nth-child(even) will fix the css. – Naj Dec 01 '21 at 13:09

Why Chrome adds tbody tag to each table row?

2 Answers2