无法更改表格单元格的innerHTML

时间:2013-06-26 13:56:36

标签: javascript html

我一直在尝试使用.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>");
}

}

当我测试它时,我收到此错误:未捕获TypeError:对象#HTMLTableCellElement的属性'innerHTML'不是函数。

我不知道为什么,因为看起来这应该有用,至少根据MSDN(“但是,要改变特定单元格的内容,你可以使用innerHTML。”)。

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

4 个答案:

答案 0 :(得分:4)

innerHTML不是方法,而是DOM属性(官方称为DOMString)。你应该这样做:

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

答案 1 :(得分:0)

  

document.getElementById(“header1”)。innerHTML(“href ='#'onclick ='selectColumn()'&gt; Column 1”);

这是无效的,因为innerHTML不是方法。 你应该像这样设置它的值:

  

document.getElementById(“header1”)。innerHTML = 某个值

答案 2 :(得分:0)

你忘了关闭你的&lt; td&gt;。

这也可能是你的问题。

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

答案 3 :(得分:0)

我已将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/

相关问题