HTML Table Row nth-child Dynamic Content Issue

Question

У меня есть таблица, где <tr> s Я засыпаю на лету, вручную изменив таблицу innerHTML. Когда я это делаю, CSS, который у меня на месте (который реализует nth-child(odd/even)), терпит неудачу.

tr:nth-child(odd) { 
    background-color: #000000; 
} 

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

Полученная таблица имеет все <tr> с с цветовой схемой с nth-child(odd) селектора.

Когда таблица заполняется динамически с tableVar.innerHTML += "<tr>...</tr>" проблема возникает, однако, оказывается, если изменить способ innerHTML модифицируется путем первой сборки строки с stringVar += "<tr>...</tr>", а затем назначая innerHTML в строку с tableVar.innerHTML = stringVar проблемой идет и ожидаемое поведение возвращается.

Почему это происходит?

Answer 1

Браузер оборачивает ваши новые строки в <tbody> элементах при конкатенации новой строки непосредственно к элементу таблицы, так что каждая последующая строка представляет собой один ряд на новый <tbody>, что делает его применить к селектору nth-child(odd). Это объясняет, почему создание нового HTML с нуля и присвоение его таблице не показывают эту проблему. Вы можете увидеть это путем проверки HTML генерируемый в консоли разработчика вашего браузера, когда вы запускаете этот пример:

var table = document.getElementById("table"); 
 
setInterval(function() { 
 
    table.innerHTML += "<tr><td>Test1</td><td>Test 2</td></tr>"; 
 
}, 1000)

tr:nth-child(odd) { 
 
    background-color: #cccccc; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: #FFFFFF; 
 
}

<table id="table"> 
 
    <tbody id="tbody"> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Если добавить непосредственно в <tbody> элемент стола вместо этого, вы увидите CSS применяются к новым строкам, как и ожидалось:

var tbody = document.getElementById("tbody"); 
 
setInterval(function() { 
 
    tbody.innerHTML += "<tr><td>Test1</td><td>Test 2</td></tr>"; 
 
}, 1000)

tr:nth-child(odd) { 
 
    background-color: #cccccc; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: #FFFFFF; 
 
}

<table id="table"> 
 
    <tbody id="tbody"> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>