#javascript #html #jquery #css
Вопрос:
Хорошо, давайте посмотрим на эту часть кода —
$(tbody).find('tr').each((i, oldTbodyTr) => {
newTr = document.createElement('tr');
$(oldTbodyTr).find('td').each((i, oldTd) => {
let newTd = document.createElement('td');
newTd.innerHTML = oldTd.innerHTML;
newTd.classList = oldTd.classList;
newTd.style = oldTd.style; //Doesn't work
newTr.appendChild(newTd);
});
newTableTbody.appendChild(newTr);
});
Он создает новое тело таблицы, перебирая все строки в tbody
уже существующей таблице.
Все в порядке, за исключением того, что стиль старого td
элемента не переносится на новый td
элемент.
Я не могу понять, почему.
Комментарии:
1. Почему бы просто не определить свои стили в CSS и не назначить класс? Сколько свойств стиля вы определили? Вам нужно будет передавать их один за другим.
2. Дело не в моих стилях. На самом деле я пишу функцию, чтобы захватить простую таблицу и предоставить полнофункциональную и красивую. Что-то вроде таблиц данных. Оно должно быть универсальным.
3. Есть ли какие-либо встроенные стили, которые вы хотите скопировать?
4. Да, мне нужно, чтобы все стили из старого td были скопированы в новый td. Весь объект. Как упоминал Себастьян, style — это свойство, доступное только для чтения. Поэтому мне интересно, как перенести все это.
5. @OP, вы рассматривали возможность простого использования
newTableTbody.append(tbody.cloneNode(true))
для вашего случая?
Ответ №1:
Если вы хотите скопировать встроенные стили, вы можете попробовать newTd.style.cssText = oldTd.style.cssText
, поскольку style
сам по себе является неизменяемым.
Подробнее см.
style.cssText
здесь .
const source = document.getElementById('source');
const target = document.getElementById('target');
target.style.cssText = source.style.cssText;
<p id="source" style="color: red; background-color: blue; font-size: 20px;">Source</p>
<p id="target">Target</p>
Комментарии:
1.
HTMLElement.style
естьPutForwards=cssText
, так что делатьelem.style = foo
— это точно то же самое , что и делатьelem.style.cssText = foo
. Если код OP не сработал, это потомуelem.style.toString()
, что will возвращает"[object CSSStyleDeclaration]"
(или"[object CSS2Properties]"
в FF), а не предполагаемый cssText. Так что они вполне могут просто написатьtarget.style = source.style.cssText;