无法更改表格单元格的 innerHTML答案

【问题标题】：Can't Change the innerHTML of a Table Cell无法更改表格单元格的 innerHTML
【发布时间】：2013-06-23 17:06:55
【问题描述】：

我在尝试使用 .innerHTML 更改表格单元格内的文本时遇到了麻烦。当我创建的单选按钮之一被选中时，我想将单元格中的纯文本更改为链接。相关代码如下：

HTML：

 ...<td id="header1" style="width: 80px; text-align:center">Column 1</th>... 


 <div id="testButtons">
        <input type="radio" name="on/off" onclick="showLinks()" value="off" id="off" checked="">
            <label for="off">Function Off</label> 
        <input type="radio" name="on/off" onclick="showLinks()" value="on" id="on">
            <label for="on">Function On</label>
 </div>

还有 Javascript：

function showLinks(){ 
if(document.getElementById("on").checked){
    document.getElementById("header1").innerHTML("<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>");
}

}

当我测试它时，我得到这个错误：Uncaught TypeError: Property 'innerHTML' of object #HTMLTableCellElement is not a function。

我不知道为什么，因为这似乎应该可以工作，至少根据MSDN （“但是，要更改特定单元格的内容，您可以使用 innerHTML。”）。

任何帮助将不胜感激，谢谢

【问题讨论】：

而不是_function对你来说毫无意义？它是一个属性，所以不要把它当作一个函数来使用......
您的 HTML 中也有一个错误：您打开了一个 <td>，但用 </th> 关闭它。
请停止在您的 html 中嵌入“onclick”标签。 robertnyman.com/2008/11/20/…

标签： javascript html

【解决方案1】：

innerHTML 不是方法而是 DOM 属性（官方称为DOMString）。你应该这样做：

document.getElementById("header1").innerHTML = "<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>";

【讨论】：

【解决方案2】：

document.getElementById("header1").innerHTML(" href='#' onclick='selectColumn()'>Column 1");

这是无效的，因为 innerHTML 不是一个方法。你应该这样设置它的值：

document.getElementById("header1").innerHTML = 一些值

【讨论】：

【解决方案3】：

你忘了关闭你的

。

这也可能是你的问题。

<td id="header1" style="width: 80px; text-align:center">Column 1 </td></th>

【讨论】：

【解决方案4】：

我把onclick改成了onchange，修复了一些html错误。

<table>
<td id="header1" style="width: 80px; text-align:center">Column 1</td>
</table>

 <div id="testButtons">
     <input type="radio" name="onoff" onchange="showLinks()" value="off" id="off" checked="" />
            <label for="off">Function Off</label> 
     <input type="radio" name="onoff" onchange="showLinks()" value="on" id="on" />
            <label for="on">Function On</label>
 </div>

<script>
function showLinks(){ 
   if(document.getElementById("on").checked){
        document.getElementById("header1").innerHTML ="<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>";
    }
}
</script>

这里是小提琴http://jsfiddle.net/C26MN/

【讨论】：