更改嵌套 div 标签中元素的innerHTML
很明显我是个白痴 - 这段代码上方的 JS 中有一个错误 - 抱歉打扰 - 以下所有内容在一种或另一种形式中都是正确的..（我也选择了适用于IE 是正确的答案）..感谢您的帮助！！
-- 仅代表代码 - 我需要知道如何更改 tablerow 的innerhtml --
<html>
<head>
<script> //full javascript declaration - function call after page loads..
function ()
{
document.getElementById('tr1').innerHTML='<td>Test</td>'; // does not work..
document.getElementByTagNames('tr')[0].innerHTML='<td>Test</td>'; // does not work..
document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
document.getElementById('div1').div2.tr1.innerHTML='<td>Test</td>'; //nope
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<table>
<tr id='tr1'></tr>
</table>
</div>
</div>
</body>
</html>
感谢您的帮助
让我澄清一下..我有 400 行 HTML/JS/Jquery 代码正在动态生成，所以我将简化为这是一个问题的部分
这个函数在主体加载时被调用：
function loadinitialData()
{
$('#tabs').tabs();
document.getElementById('tr0').innerHTML = '<td>John Doe</td><td>3.988000</td><td>Candidate Doe</td>';
document.getElementById('tr1').innerHTML = '<td>Jane Doe</td><td>5.796000</td><td>Candidate Doe</td>';
}
这是在主体中：
<div id="tabs" class="ui-corner-top">
<ul>
<li><a href="#tabs-1">Some Idiots</a></li>
<li><a href="#tabs-2">Other Idiots</a></li>
</ul>
<div id="tabs-1">
<table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
</div>
PS：使用jquery选项卡但这不可能是一个问题..
根据@Gero我尝试了以下操作： 将所有加载更改为：
document.getElementById('tablet10').rows[0].cells[0].innerHTML = 'John Doe';
document.getElementById('tablet10').rows[0].cells[1].innerHTML ='3.988000';
document.getElementById('tablet10').rows[0].cells[2].innerHTML ='Candidate Doe';
Blah Blah - 所有其余的..
在正文中
<div id="tabs-1">
<table id="tablet10" width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px'><td></td><td></td><td></td></tr><tr style='font-size:12px'><td></td><td></td><td></td></tr></tbody></table></div>
每个@plodder加载：
document.getElementById('tr0').insertCell(0).innerHTML = 'John Doe';
document.getElementById('tr0').insertCell(1).innerHTML ='3.988000';
document.getElementById('tr0').insertCell(2).innerHTML ='Candidate Doe';
以及其余的blah blah..
和正文：
<div id="tabs-1">
<table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>
It has become apparent I'm quite an idiot - there was an error in my JS above this code - sorry for the bother - all the below are correct in one form or another.. (also I'm selecting the one that works in IE is the correct answer).. Thanks for all your help!!
-- Representative code only - I need to know how to change the innerhtml of the tablerow --
<html>
<head>
<script> //full javascript declaration - function call after page loads..
function ()
{
document.getElementById('tr1').innerHTML='<td>Test</td>'; // does not work..
document.getElementByTagNames('tr')[0].innerHTML='<td>Test</td>'; // does not work..
document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
document.getElementById('div1').div2.tr1.innerHTML='<td>Test</td>'; //nope
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<table>
<tr id='tr1'></tr>
</table>
</div>
</div>
</body>
</html>
Thanks for the help
Let me clarify.. I have 400 lines of HTML/JS/Jquery code being dynamically generated so I'll simplify to the part that is a problem
This function is called when the body loads:
function loadinitialData()
{
$('#tabs').tabs();
document.getElementById('tr0').innerHTML = '<td>John Doe</td><td>3.988000</td><td>Candidate Doe</td>';
document.getElementById('tr1').innerHTML = '<td>Jane Doe</td><td>5.796000</td><td>Candidate Doe</td>';
}
This is in the body:
<div id="tabs" class="ui-corner-top">
<ul>
<li><a href="#tabs-1">Some Idiots</a></li>
<li><a href="#tabs-2">Other Idiots</a></li>
</ul>
<div id="tabs-1">
<table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
</div>
PS: Using jquery tabs but that can't be a problem..
Per @Gero I tried the following:
Changed all the loading to:
document.getElementById('tablet10').rows[0].cells[0].innerHTML = 'John Doe';
document.getElementById('tablet10').rows[0].cells[1].innerHTML ='3.988000';
document.getElementById('tablet10').rows[0].cells[2].innerHTML ='Candidate Doe';
Blah Blah - all the rest..
In the body
<div id="tabs-1">
<table id="tablet10" width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px'><td></td><td></td><td></td></tr><tr style='font-size:12px'><td></td><td></td><td></td></tr></tbody></table></div>
Per @plodder loading:
document.getElementById('tr0').insertCell(0).innerHTML = 'John Doe';
document.getElementById('tr0').insertCell(1).innerHTML ='3.988000';
document.getElementById('tr0').insertCell(2).innerHTML ='Candidate Doe';
and the rest blah blah..
and body:
<div id="tabs-1">
<table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
<tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
<tbody>
<tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
该代码在 IE 中将失败，因为 TR.innerHTML 在 IE 中不可写入
您应该对表行使用 DOM API
The code will fail in IE because TR.innerHTML is not writeable in IE
You should use the DOM API for table rows
在这里您可以看到工作代码的示例。
http://www.w3schools.com/js/tryit.asp?filename= try_dom_tablerow_cells
Here you can see an example of working code.
http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_cells
“该属性对于所有对象都是读/写的，但以下对象除外，它是只读的：COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAAD、TITLE、TR。”
“可以使用 DHTML 表达式来代替前面的值。”
http://msdn.microsoft.com/en-us/library/ms533897。 ASPX
"The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."
"DHTML expressions can be used in place of the preceding value(s)."
http://msdn.microsoft.com/en-us/library/ms533897.aspx