Динамически добавленный класс работает на <td>, но не на <tr>.Зачем?

Question

Функция просто вставляет новые строки в пустую таблицу при вызове функции.

может показаться, что, поскольку класс <td> назначен правильно, <tr> также будет назначен ..Но это не так!

var newRow = document.createElement("tr");

for (data in dataArray)
{
    var newName = document.createElement("td"); 

    newName.className = classNames[data];
    newName.innerHTML = dataArray[data];
    newRow.appendChild(newName);
    counter++;
}
document.getElementById("capturedData").appendChild(newRow);
var newRow2 = document.createElement("tr");
newRow2.class = "hiddenRow";

for (data in dataArray)
{
    var newData = document.createElement("td");
    var newDataField = document.createElement("input");

    newDataField.type = "hidden";
    newDataField.name = "name" + data;
    newDataField.value = dataArray[data];

    newData.class = classNames[data];
    newData.value = dataArray[data];

    newData.appendChild(newDataField);      
    newRow2.appendChild(newData);   
}

, что действительно странно.Всем новым добавленным элементам <td> назначены классы, и они отображаются в DOM.Но элементы <tr> не принимают присвоение класса, а в DOM они не имеют класса.

Почему это так?Я читал о предполагаемой асинхронности выполнения скрипта, но, конечно, это не может иметь место, это победило бы цель, нет?

Answer 1

Элементы DOM не имеют свойства class, поскольку это зарезервированное ключевое слово. Вы ищете className:

newRow2.className = "hiddenRow";

То же самое для ячейки (newData). Это работает для вашей другой ячейки, потому что вы уже используете className:

newName.className = classNames[data];

Answer 2

Использовать только className , а не class . В <TR>.

отсутствует свойство класса.