使用W3C DOM技术在IE 6中插入表。 [英] Inserting Tables in IE 6 using W3C DOM techniques.
问题描述
我在尝试使用W3C DOM
技术插入表时在IE 6中遇到了问题。
我找到了解决方案并分享了它。 :)
最初我有......
*************** *******
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.1 // EN"
" http：// www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns =" http：//www.w3.org/1999/xhtml" xml：lang =" en">
< head>
< meta http-equiv =" content-type"含量=" text / html的;字符集= UTF-8英寸/>
< meta http-equiv =" content-script-type"含量="文本/ JavaScript的" />
< title> insertTableInIE< / title>
/ *<！[CDATA [* /
函数insertTable（）{
var table = document.createElement（" ; table"）;
table.setAttribute（" id"，" table2"）;
var tr = document.createElement（" tr"）;
var td = document.createElement（" td"）;
td.appendChild（document.createTextNode（" cell in some stuff））;
tr.appendChild（td）;
table.appendChild（tr）;
document.getElementById（''output''）。appendChild（tabl e ）;
}
/ *]]> * /
< / script>
< / head>
< body>
< div>
< input type =" button" ID = QUOT; btnInsertTable" name =" btnInsertTable"
onclick =" insertTable（）" value =" Insert Table" />
< / div>
< div id =" output">< / div>
< / body>
< / html>
********************** ******
这适用于firefox 1.5但不适用于IE 6.
解决方案....你必须明确地插入tr成为一个tbody元素
然后将tbody放入表中。所以函数现在变成：
函数insertTable（）{
var table = document.createElement（" table"）;
table.setAttribute（" id"，" table2"）;
var tbody = document.createElement（" tbody"）; //明确创建一个
tbody
var tr = document.createElement（" tr"）;
var td = document.createElement（ td;;
td.appendChild（document.createTextNode（单元格中的某些内容））;
tr.appendChild（td）;
tbody.appendChild（tr）; //注意这个新行。
table.appendChild（tbody）; //追加tbody而不是tr
document.getElementById（''output''）。appendChild（tabl e）;
}
希望这能节省一两个小时。
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.
I found a solution and share it. :)
Initially I had......
**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>insertTableInIE</title>
<script type="text/javascript">
/* <![CDATA[ */
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the cell"));
tr.appendChild(td);
table.appendChild(tr);
document.getElementById(''output'').appendChild(tabl e);
}
/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>
<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.
The solution.... you have to explicitly insert the tr into a tbody element
and then the tbody into the table. So the function now becomes:
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the cell"));
tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById(''output'').appendChild(tabl e);
}
Hope this saves some else an hour or two.
推荐答案
Mellow Crow写道：
Mellow Crow wrote:
当我尝试使用W3C DOM
技术插入表时，我在IE 6中遇到了问题。
我找到了一个解决方案并分享它。 ：）
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.
I found a solution and share it. :)
很好，看起来IE正在做正确的事情，表行应该是
包含在一个tbody中。
HTML-DOM界面insertRow应该为你添加它，如果它不存在的话。
Ian
Nice, looks like IE is doing the correct thing, table rows should be
contained in a tbody.
The HTML-DOM interface insertRow should add this for you if it isn''t there.
Ian
Mellow Crow <无***** @ nowhere.com>写在
news：43 ******** @ duster.adelaide.on.net:
"Mellow Crow" <no*****@nowhere.com> wrote in
news:43********@duster.adelaide.on.net:
我在IE 6中遇到了问题尝试使用W3C DOM
技术插入表格。
我找到了一个解决方案并分享。 :)
最初我有......
**********************
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.1 // EN"
" http：//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns =" http：//www.w3.org/1999/xhtml" xml：lang =" en">
< head>
< meta http-equiv =" content-type"含量=" text / html的; charset = utf-8"
/> < meta http-equiv =" content-script-type" content =" text / javascript"
/>
< title> insertTableInIE< / title>
< script type =" text / javascript" ;>
/ *<！[CDATA [* /
函数insertTable（）{
var table = document.createElement（" table"）;
table.setAttribute（" id"，" table2"）;
var tr = document.createElement（" tr"）;
var td = document.createElement（" td"）;
td.appendChild（document.createTextNode（>
单元格中的一些东西））; tr.appendChild（td）;
table.appendChild（tr）;
document.getElementById（''output''）。appendChild（tabl e）;
}
/ *]]> * /
< / script>
< / head>
< body>
< div>
< input type =" button" ID = QUOT; btnInsertTable" name =" btnInsertTable"
onclick =" insertTable（）" value =" Insert Table" />
< / div>
< div id =" output">< / div>
< / body>
< ; / html>
****************************
这可以在firefox 1.5中运行但不在IE中6.
解决方案....你必须明确地将tr插入到一个tbody
元素中然后将tbody插入到表中。所以函数现在变为：
函数insertTable（）{
var table = document.createElement（" table"）;
table.setAttribute（" id"，" table2"）;
var tbody = document.createElement（" tbody"）; //明确地
创建一个
var tr = document.createElement（" tr"）;
var td = document.createElement（" td"）;
td.appendChild（document.createTextNode（"
单元格中的某些内容））; tr.appendChild（td）;
tbody.appendChild（tr）; //注意这个新行。
table.appendChild（tbody）; //追加tbody而不是tr
document.getElementById（''output''）。appendChild（tabl e）;
}
希望这可以节省一些其他时间一两个小时。
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.
I found a solution and share it. :)
Initially I had......
**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/> <meta http-equiv="content-script-type" content="text/javascript"
/>
<title>insertTableInIE</title>
<script type="text/javascript">
/* <![CDATA[ */
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
table.appendChild(tr);
document.getElementById(''output'').appendChild(tabl e);
}
/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>
<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.
The solution.... you have to explicitly insert the tr into a tbody
element and then the tbody into the table. So the function now
becomes:
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly
create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById(''output'').appendChild(tabl e);
}
Hope this saves some else an hour or two.
因为表格行也是表格标题的一部分（''thead''）和表格
页脚（''tfoot'' ），你是说IE引用为这些节点创建子表行
元素吗？
只要你进入实验，那么这里可能会为你做一些更多的实验：
*看看浏览器如何添加多于一个表头或表格
通过调用DOM函数将页脚元素添加到表节点。尝试更多
而不是一个桌子身体。
*将多个表头，表格页脚和表格体写入一个
表使用经过验证的HTML，看看浏览器如何通过检查
之后的DOM树来解析它。 （或者报告你在尝试某些电话的
中找到的例外情况。）
*撰写一个验证简单的HTML文档，在其中创建一个表格
没有任何部分元素---没有THEAD，没有TBODY，没有TFOOT ----只有一个
几行，每行有几个单元格（可能没有内容） 。
检查DOM层次结构，看看哪些浏览器将表格元素强加给表格中的
（即TBODY），并且就像你编写它一样呈现它，
且符合所有规格（HTML，ECMA-262 :: Javascript，
DOM）。
结果是好奇心。
Since table rows are also part of table headers (''thead'') and table
footers (''tfoot''), are you saying that IE refers to create child table row
elements for these nodes?
As long as you''re into experiments, then here might be some more
experiments for you:
* See how the browsers do in adding MORE THAN ONE table header or table
footer element to a table node through calling DOM functions. Try more
than one table body while you''re at it.
* Write more than one table header, table footer, and table body into a
table using validated HTML, see how the browser parses it by inspecting
the DOM tree thereafter. (Alternatively report the exceptions you find in
attempting certain calls.)
* Compose a validating simple HTML document in which you create a table
WITHOUT any section elements---no THEAD, no TBODY, no TFOOT----and just a
couple of rows each with a couple of cells (can be void of content).
Inspect the DOM hierarchy to see which browsers imposed section elements
(namely TBODY) into the table, and which rendered it just as you wrote it,
and which conformed to all specifications (HTML, ECMA-262::Javascript,
DOM).
The results are a curiosity.
患者家伙< Pa ********* @ nowhere.to.be.found.com>写在
新闻：Xn ****************** @ 207.115.17.102：
Patient Guy <Pa*********@nowhere.to.be.found.com> wrote in
news:Xn******************@207.115.17.102:
" Mellow Crow&＃ <无***** @ nowhere.com>在
新闻中写道：43 ******** @ duster.adelaide.on.net：
"Mellow Crow" <no*****@nowhere.com> wrote in
news:43********@duster.adelaide.on.net:
我在IE 6中尝试插入时遇到问题表使用W3C DOM
技术。
我找到了解决方案并分享。 :)
最初我有......
**********************
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.1 // EN"
" http：//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns =" http：//www.w3.org/1999/xhtml" xml：lang =" en">
< head>
< meta http-equiv =" content-type"含量=" text / html的; charset = utf-8"
/> < meta http-equiv =" content-script-type" content =" text / javascript"
/>
< title> insertTableInIE< / title>
< script type =" text / javascript" ;>
/ *<！[CDATA [* /
函数insertTable（）{
var table = document.createElement（" table"）;
table.setAttribute（" id"，" table2"）;
var tr = document.createElement（" tr"）;
var td = document.createElement（" td"）;
td.appendChild（document.createTextNode（>
单元格中的一些东西））; tr.appendChild（td）;
table.appendChild（tr）;
document.getElementById（''output''）。appendChild（tabl e）;
}
/ *]]> * /
< / script>
< / head>
< body>
< div>
< input type =" button" ID = QUOT; btnInsertTable" name =" btnInsertTable"
onclick =" insertTable（）" value =" Insert Table" />
< / div>
< div id =" output">< / div>
< / body>
< ; / html>
****************************
这可以在firefox 1.5中运行但不在IE中6.
解决方案....你必须明确地将tr插入到一个tbody
元素中然后将tbody插入到表中。所以函数现在变为：
函数insertTable（）{
var table = document.createElement（" table"）;
table.setAttribute（" id"，" table2"）;
var tbody = document.createElement（" tbody"）; //明确地
创建一个
var tr = document.createElement（" tr"）;
var td = document.createElement（" td"）;
td.appendChild（document.createTextNode（"
单元格中的某些内容））; tr.appendChild（td）;
tbody.appendChild（tr）; //注意这个新行。
table.appendChild（tbody）; //追加tbody而不是tr
document.getElementById（''output''）。appendChild（tabl e）;
}
希望这可以节省一些其他时间一两个小时。
由于表行也是表头（''thead''）和表
页脚（''tfoot''）的一部分，你是说IE引用创建子表
这些节点的行元素？
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.
I found a solution and share it. :)
Initially I had......
**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/> <meta http-equiv="content-script-type" content="text/javascript"
/>
<title>insertTableInIE</title>
<script type="text/javascript">
/* <![CDATA[ */
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
table.appendChild(tr);
document.getElementById(''output'').appendChild(tabl e);
}
/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>
<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.
The solution.... you have to explicitly insert the tr into a tbody
element and then the tbody into the table. So the function now
becomes:
function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly
create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById(''output'').appendChild(tabl e);
}
Hope this saves some else an hour or two.
Since table rows are also part of table headers (''thead'') and table
footers (''tfoot''), are you saying that IE refers to create child table
row elements for these nodes?
校对更正：
" ...你是说IE引用创建......
应该读取
......你是说IE REFUSES要创建...... br />
只要你进入实验，那么这里可能会有更多的实验：
*看看浏览器如何添加超过一个通过调用DOM函数将表格页眉或表格页脚元素添加到表节点。
在你使用时可以尝试多个表格。
*不止一个桌头，桌脚呃，并使用经验证的HTML将表体放入表中，看看浏览器如何通过检查DOM树来解析它。 （或者报告在尝试某些调用时发现的例外情况。）
*编写一个验证简单的HTML文档，在其中创建一个没有任何节元素的表格 - 否THEAD，没有TBODY，没有
TFOOT ----只有几行，每行有几个单元格（可能没有内容）。检查DOM层次结构以查看哪些浏览器将部分元素（即TBODY）强加到表中，以及哪些浏览器像您编写它一样呈现它，哪些符合所有
规范（HTML， ECMA-262 :: Javascript，DOM）。
结果是好奇心。
Proofreading Correction:
"...are you saying that IE refers to create..."
should read
"...are you saying that IE REFUSES to create..."
As long as you''re into experiments, then here might be some more
experiments for you:
* See how the browsers do in adding MORE THAN ONE table header or
table footer element to a table node through calling DOM functions.
Try more than one table body while you''re at it.
* Write more than one table header, table footer, and table body into
a table using validated HTML, see how the browser parses it by
inspecting the DOM tree thereafter. (Alternatively report the
exceptions you find in attempting certain calls.)
* Compose a validating simple HTML document in which you create a
table WITHOUT any section elements---no THEAD, no TBODY, no
TFOOT----and just a couple of rows each with a couple of cells (can be
void of content). Inspect the DOM hierarchy to see which browsers
imposed section elements (namely TBODY) into the table, and which
rendered it just as you wrote it, and which conformed to all
specifications (HTML, ECMA-262::Javascript, DOM).
The results are a curiosity.
这篇关于使用W3C DOM技术在IE 6中插入表。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
