使用innerHTML帮助DOM行/单元格 [英] help with DOM row/cell with innerHTML
问题描述
我有这个代码可以创建一个新的新行和单元格。然后我使用innerHTML将一些
文本放入单元格中 - 与Firefox一起工作得非常好但是
因IE而失败。我猜IE不支持这种做法，但是
有另外一种方法可以用DOM吗？
newr = document.createElement （''tr''）;
stbl.appendChild（newr）;
newc = document.createElement（''td''）;
newr.appendChild（newc）;
newr.cells [0] .innerHTML =（nr + 1）+。 " + sa [ti] [nr + 1] +"< br>< hr>" ;;
（适用于Firefox，但在IE 6+中也失败了......）
necromonger写道：
我有此代码创建一个新的新行和单元格。然后我使用innerHTML将一些
文本放入单元格中 - 与Firefox一起工作得非常漂亮，但
在IE中失败了。我猜IE不支持这种做法，但是还有另一种方法可以用DOM吗？
newr = document.createElement（''tr''）;
stbl.appendChild（newr）;
newc = document.createElement（''td''）;
newr.appendChild（newc）;
newr.cells [0] .innerHTML =（nr + 1）+。 " + sa [ti] [nr + 1] +"< br>< hr>" ;;
（适用于Firefox，但在IE 6+中也失败了......）
过去我注意到有时你不能在IE中访问元素，直到它实际被添加到文档中。
尝试将新行写入文档（将其插入
表），然后修改innerHTML。
或者，创建文本节点并将您的文本附加到
it，然后将其附加到单元格。我不确定，但是你
应该能够以同样的方式创建和附加HR。我现在没有时间玩这个，只是
希望帮忙。
Rob
谢谢ROb。你已经提到我应该插入排成一排，
我该怎么做？是不是appendChild已经做到了（内部？）
这对你来说很好，因为我也注意到即使我在
插入一个新的tr ，当我检查table.rows.length时，它仍然和以前一样
..任何想法都会有所帮助..我对此非常新（事实上今天是
我学习的第3天）
非常感谢！
RobG写道：necromonger写道：
< blockquote class =post_quotes>
我有这个代码创建一个新的新行和单元格。然后我使用innerHTML将一些文本放入单元格中 - 与Firefox一起工作得非常好但是
在IE中失败了。我猜IE不支持这种做法，但是还有另一种方法可以用DOM吗？
newr = document.createElement（''tr''）;
stbl.appendChild（newr）;
newc = document.createElement（''td''）;
newr.appendChild（newc）;
newr.cells [0] .innerHTML =（nr + 1）+。 " + sa [ti] [nr + 1] +"< br>< hr>" ;;
（适用于Firefox，但在IE 6+中也失败了......）
过去我注意到，有时你无法访问IE中的元素，直到它实际被添加到文档中。尝试将新行写入文档（将其插入表格中），然后修改innerHTML。
或者，创建一个文本节点并将文本附加到其中，然后
将其附加到单元格。我不确定，但你应该能够创建
并以同样的方式附加HR。我现在没有时间玩这个
，只是希望能提供帮助。
Rob
necromonger写道：
谢谢ROb。你已经提到我应该插入排成一排，
我该怎么做？是不是appendChild已经做到了（内部？）
是的，你已经做到了。我试图想出一个更明确的方式，但不能想到一个。我尝试了创建P和文本节点并添加它们而不是使用
innnerHTML，更改顺序等，但似乎没有任何东西
工作。
这对你来说很好，因为我也注意到即使我插入一个新的tr，当我检查table.rows.length时，它仍然是相同的<像以前一样..任何想法都会有所帮助..我对此非常陌生（事实上今天是我学习的第3天）
我添加了一个showDOM功能如下。它显示在IE
中添加了额外的东西但是没有显示
显示（???）
我已经基于insertBefore和
nextSibling创建了一个新函数，但是你需要一个现有的行来使用它 - 如果它解决了你的问题，请参阅
。 />
我的猜测是，addRow1并没有在相当的
正确的位置添加TR，尽管IE通常非常容易接受
这样。
小心包装...
< html>
< head>
< title>插入行< / title>
< script type =" text / javascript">
function addRow1（stbl）{
alert（stbl.rows.length +"：" + stbl.firstChild.nodeName）;
var newr = document.createElement（ ''tr''）;
var newc = document.createElement（''td''）;
var newT1 = document.createElement（''p''）
var newT2 = docum ent.createTextNode（一个新的段落）;
var newT3 = document.createElement（''hr''）
newc.appendChild （newT1）;
newc.appendChild（newT2）;
newc.appendChild（newT3）;
newr.appendChild（newc）;
stbl.appendChild（newr）;
//测试DOM的东西在没有表的情况下工作
var bodyRef = document.getElementsByTagName （body）。item（0）;
var newT4 = document.createElement（''p''）
var newT5 = document.createTextNode（"一个新的段落）;
bodyRef.appendChild（newT4）;
bodyRef.appendChild（newT5）;
}
函数addRow2（r）{
var newr = document.createElement（''tr''）;
var newc = document.createElement（''td''）;
newc.innerHTML =" blah blah blah< br>< hr>" ;;
newr.appendChild（newc）;
var rParent = r.parentNode;
rParent.insertBefore（newr，r.nextSibling）;
}
函数showDOM（）{
var msg =" ;;
函数listNodes（n）{
msg + = n.nodeName +" \\\
" ;;
for（var i = 0; I< n.childNodes.length; i ++）{
listNodes（n.childNodes [i]）;
}
}
listNodes（document.getElementById（" aTable"））;
alert（msg）;
}
< / script>
< / head>
< body>
< table id =" aTable" border =" 1">
< tr id =" aRow">< td>这是aRow< / td>< / tr>
< / table>
< br>
< form action ="" name =" aForm">
< input type =" button" value =" add row 1" onclick ="
addRow1（document.getElementById（''aTable''））;
">
<输入类型=”按钮" value =" add row 2" onclick ="
addRow2（document.getElementById（''aRow''））;
">
<输入类型=”按钮" value ="显示DOM树>
onclick =" showDOM（）;">
< / form>
< / body>
< / html>
Hi,
I''ve got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn''t support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement(''tr'');
stbl.appendChild(newr);
newc = document.createElement(''td'');
newr.appendChild(newc);
newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";
(works in firefox but fails in IE 6+ too...)
necromonger wrote:
Hi,
I''ve got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn''t support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement(''tr'');
stbl.appendChild(newr);
newc = document.createElement(''td'');
newr.appendChild(newc);
newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";
(works in firefox but fails in IE 6+ too...)
I have noticed in the past that sometimes you can''t access
an element in IE until it is actually added to the document.
Try writing your new row to the document (insert it in the
table), then modify the innerHTML.
Alternatively, create a text node and append your text to
it, then append it to the cell. I''m not sure, but you
should be able to create and append the HR the same way. I
don''t have time to play with this myself right now, just
hoping to help out.
Rob
Thanks ROb. You''ve mentioned I should "insert" the row into the table,
how do I do that? isnt appendChild doing it already (internally?)
It''s good you mentioend that, because I also noticed that even when I
insert a new tr, when i check the table.rows.length, it remains the same
as before.. any ideas will help.. am very new to this (in fact today is
the 3rd day of my learning)
thanks plenty!
RobG wrote:necromonger wrote:Hi,
I''ve got this code that creates a new new row and cell. I then put
some text into the cell with innerHTML - works beautifully with
Firefox but
fails with IE. I guess IE doesn''t support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement(''tr'');
stbl.appendChild(newr);
newc = document.createElement(''td'');
newr.appendChild(newc);
newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";
(works in firefox but fails in IE 6+ too...)
I have noticed in the past that sometimes you can''t access an element in
IE until it is actually added to the document. Try writing your new row
to the document (insert it in the table), then modify the innerHTML.
Alternatively, create a text node and append your text to it, then
append it to the cell. I''m not sure, but you should be able to create
and append the HR the same way. I don''t have time to play with this
myself right now, just hoping to help out.
Rob
necromonger wrote:
Thanks ROb. You''ve mentioned I should "insert" the row into the table,
how do I do that? isnt appendChild doing it already (internally?)
Yes, you already do it. I was trying to think of a more
explicit way of doing it but can''t think of one. I tried
creating P and text nodes and adding them rather than using
innnerHTML, changing the order, etc. but nothing seems to
work.
It''s good you mentioend that, because I also noticed that even when I
insert a new tr, when i check the table.rows.length, it remains the same
as before.. any ideas will help.. am very new to this (in fact today is
the 3rd day of my learning)
I''ve added a "showDOM" function below. It shows that in IE
the extra stuff is added but just doesn''t get
displayed(???)
I''ve created a new function based on insertBefore and
nextSibling, but you need an exsiting row to use it - see
if it solves you problem.
My guess is that addRow1 is not adding the TR in quite the
right spot, though IE is normally very tollerant of stuff
like that.
Careful of wrapping...
<html>
<head>
<title>Insert Row</title>
<script type="text/javascript">
function addRow1(stbl) {
alert(stbl.rows.length + " : " + stbl.firstChild.nodeName);
var newr = document.createElement(''tr'');
var newc = document.createElement(''td'');
var newT1 = document.createElement(''p'')
var newT2 = document.createTextNode("A new para.");
var newT3 = document.createElement(''hr'')
newc.appendChild(newT1);
newc.appendChild(newT2);
newc.appendChild(newT3);
newr.appendChild(newc);
stbl.appendChild(newr);
// Test that DOM stuff works without the table
var bodyRef = document.getElementsByTagName("body").item(0);
var newT4 = document.createElement(''p'')
var newT5 = document.createTextNode("A new para.");
bodyRef.appendChild(newT4);
bodyRef.appendChild(newT5);
}
function addRow2(r) {
var newr = document.createElement(''tr'');
var newc = document.createElement(''td'');
newc.innerHTML = "blah blah blah <br><hr>";
newr.appendChild(newc);
var rParent = r.parentNode;
rParent.insertBefore(newr,r.nextSibling);
}
function showDOM() {
var msg = "";
function listNodes(n) {
msg += n.nodeName + "\n";
for (var i=0; i<n.childNodes.length; i++) {
listNodes(n.childNodes[i]);
}
}
listNodes(document.getElementById("aTable"));
alert(msg);
}
</script>
</head>
<body>
<table id="aTable" border="1">
<tr id="aRow"><td>Here is aRow</td></tr>
</table>
<br>
<form action="" name="aForm">
<input type="button" value="add row 1" onclick="
addRow1(document.getElementById(''aTable''));
">
<input type="button" value="add row 2" onclick="
addRow2(document.getElementById(''aRow''));
">
<input type="button" value="Show DOM tree"
onclick="showDOM();">
</form>
</body>
</html>
这篇关于使用innerHTML帮助DOM行/单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
