0

Ok let's look at this part of the code -

$(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);
});

It creates a new table body by looping through all rows in tbody of an already existing table. Everything is fine, except that the style of the old td doesn't transfer to the new td element. I can't figure out why.

Anuj Raghuvanshi
  • 664
  • 1
  • 7
  • 24
Soroush Bgm
  • 482
  • 2
  • 15
  • 1
    Why not simply define your styles in CSS and assign a class? How many style properties have you defined? You’d need to transfer them one by one. – Sebastian Simon Nov 30 '21 at 05:30
  • It's not about my styles. Actually I'm writing a function to grab a simple table and deliver a full-featured and pretty one. Something like DataTables. It must be universally working. – Soroush Bgm Nov 30 '21 at 05:40
  • Are there any inline styles you want to copy? – Hao Wu Nov 30 '21 at 05:48
  • Yeah I need all styles from older td to be copied to new td. Entire object. As Sebastian mentioned, style is read-only property. So I wonder how to transfer all of it. – Soroush Bgm Nov 30 '21 at 05:51
  • If you also want to copy inline styles, use `newTd.style.cssText = oldTd.style.cssText` instead. – Hao Wu Nov 30 '21 at 05:51
  • Thanks buddy. Perfectly worked :)) Can you post that as an answer so I can vote it as correct? – Soroush Bgm Nov 30 '21 at 05:53
  • Just did :) Glad it helped – Hao Wu Nov 30 '21 at 05:56
  • 1
    @OP, have you considered simply using `newTableTbody.append(tbody.cloneNode(true))` for your case? – Kaiido Nov 30 '21 at 06:43
  • @Kaiido newTd = oldTd simply does that. But I didn't want entire object to be copied. Only classes, styles and innerHTML. – Soroush Bgm Nov 30 '21 at 06:46
  • @SoroushBgm `newTd = oldTd` doesn’t copy anything other than the reference of `oldTd` to the binding `let newTd`, i.e. you’re just reassigning your variable. It neither affects `newTd` nor `oldTd`. No properties are being copied. – Sebastian Simon Nov 30 '21 at 06:51
  • @SebastianSimon I thought when we grab an element and store it in a variable, we are actually storing an object. We can also copy objects like this obj1 = obj2. The point you mentioned is tricky. I should read more about that. – Soroush Bgm Nov 30 '21 at 06:56
  • See [Modifying a copy of a JavaScript object is causing the original object to change](/q/29050004/4642212). – Sebastian Simon Nov 30 '21 at 06:59

1 Answers1

0

If you want to copy inline styles, you could try newTd.style.cssText = oldTd.style.cssText since style itself is immutable.

See more about 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>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • [`HTMLElement.style`](https://drafts.csswg.org/cssom/#the-elementcssinlinestyle-mixin) is [`PutForwards=cssText`](https://webidl.spec.whatwg.org/#PutForwards), so doing `elem.style = foo` is exactly the same as doing `elem.style.cssText = foo`. If OP's code didn't work it's because `elem.style.toString()` will return `"[object CSSStyleDeclaration]"` (or `"[object CSS2Properties]"` in FF) and not the intended cssText. So they can very well just write `target.style = source.style.cssText;` – Kaiido Nov 30 '21 at 06:38