如何在单元格中添加colspan和文本?

How to add colspan and text in cell?

我在插入行和单元格、添加文本(innerHTML、textContent)和 colspan 时遇到错误。错误内容为:

野生动物园:

"TypeError: Attempted to assign to readonly property."

Chrome:

"Uncaught TypeError: Cannot assign to read only property"

如果我删除文本,colspan 将起作用并且任何其他单元格将显示;如果我删除 colspan,文本将显示。如果我尝试保留两者,除了出现错误之外,任何其他存在的单元格都将消失,并且 colspan 将不起作用。

示例html:

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

示例 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";

...或

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

...然后

    total.colSpan = "4";
}

当我搜索这个问题时,我读到 iOS8 中存在这个问题,并且在严格模式下使用时会发生;但是,如果我删除 "use strict",错误消息将消失,但问题仍然存在。有人说这是一个 webkit 错误,但同样的事情发生在 Firefox 中,只是没有错误消息。

可能相关link: TypeError: Attempted to assign to readonly property. on iOS8 Safari

我做错了什么或者有解决方法吗?

附录:次级优化是添加第二个没有插入文本的单元格,并给它一个 colspan。

my_row.insertCell(0).textContent = "my colspan text" 不是 return 单元格,它 return 是分配给 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>