How to add colspan and text in cell?

Question

I'm getting an error when I insert a row and a cell, add a text (innerHTML, textContent) and a colspan. The error reads:

Safari:

"TypeError: Attempted to assign to readonly property."

Chrome:

"Uncaught TypeError: Cannot assign to read only property"

If I remove the text, the colspan will work and any other cells will show; if I remove the colspan, the text will show. If I try to keep both, apart from getting the error, any other cells that exist will disappear, and the colspan won't work.

Example html:

<table id ="my_table">
                    <thead>
                        <tr>
                            <th>text</th>
                            <th>text</th>
                            <th>text</th>
                            <th>text</th>
                            <th>text</th>
                        </tr>

Example JS:

function test3() {

    //get the table id;
    var table = document.getElementById('my_table');

    //create row, cell
    var my_row = table.insertRow(-1);
    var total = my_row.insertCell(0).textContent = "my colspan text";

...or

var total = my_row.insertCell(0).innerHTML = "my colspan text";

...then

    total.colSpan = "4";
}

When I searched for this problem, I read that this exists in iOS8 and that it occurs when use in strict mode; however, if I remove "use strict", the error message will disappear, but the problem will persist. Some say it's a webkit bug, but the same thing happens in Firefox, minus the error message.

Possibly related link: TypeError: Attempted to assign to readonly property. on iOS8 Safari

Am I doing something wrong or is there a workaround?

Addendum: a sub-optimization is to add a second cell that has no text inserted, and give it a colspan.

score 3 · Accepted Answer · answered May 11 '15 at 12:23

my_row.insertCell(0).textContent = "my colspan text" doesn't return the cell, it returns the string assigned to textContent

       function test3() {

         //get the table id;
         var table = document.getElementById('my_table');

         //create row
         var my_row = table.insertRow(-1);
         //create cell
         var total = my_row.insertCell(0); 
         //set properties
         total.textContent = "my colspan text";
         total.colSpan = 4;
       }
window.addEventListener('load', test3, false);

<table id="my_table" border="1">
  <thead>
    <tr>
      <th>text</th>
      <th>text</th>
      <th>text</th>
      <th>text</th>
      <th>text</th>
    </tr>
  </thead>
</table>

It worked, thanks. I would never imagine that my line of code didn't return the cell, only the string. — Dan Sebastian, May 11 '15 at 12:33

How to add colspan and text in cell?

1 Answers1