IE6无法正常显示DOM动态创建的Table和RadioGroup

Navymk 2008-06-05 08:34:47

请看代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>



</head>



<body>

<textarea cols="100" rows="20" id="code"></textarea>

<div id="container">aaaaa</div>

<script type="text/javascript">



function domTable(){

	var rowCount = 10;

	var cellCount = 10;

	var tb = document.createElement("table");

	tb.border = 1;

	tb.cellspacing = 2;

	tb.cellpadding = 2;

	for(var i=0; i<rowCount; i++){

		var tr = document.createElement("tr");

		for(var j=0; j<rowCount; j++){

			var td = document.createElement("td");

			td.innerHTML = i + "-" + j;

			tr.appendChild(td);

		}

		tb.appendChild(tr);

	}

	document.getElementById("container").appendChild(tb);

	if(tb.outerHTML)document.getElementById("code").value = tb.outerHTML;

}



function radioGroup(){

	var count = 10;

	var checkedIndex = 4;

	var groupName = "test";

	var frag = document.createDocumentFragment();

	for(var i=0; i<count; i++){

		var r = document.createElement("input");

		r.type = "radio";

		r.name = groupName;

		r.id = groupName + "_" + i;

		

		var label = document.createElement("label");

		label.innerHTML = r.id;

		label['for'] = r.id;

		if(i == checkedIndex) r.checked = true;

		frag.appendChild(r);

		frag.appendChild(label);

	}

	document.getElementById("container").appendChild(frag);

}

domTable();

radioGroup();



</script>



</body>

</html>

此代码在container中显示一个table和一个radiogroup.
ff下显示正确,无报错.

但是ie6下,table没有显示,radiogroup无法选择.
为了确保table的正确性,我做了textarea来显示outerHTML,但从代码来看没有问题.
请问问题出在哪里.

另,给label如何添加"for"属性?我试了好几种方式都不成功.

...全文

180 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Navymk 2008-06-06

打赏
举报

没有更好的解决方案就结了哦

mingxuan3000 2008-06-05

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>



</head>



<body>

<textarea cols="100" rows="20" id="code"></textarea>

<div id="container">aaaaa</div>

<script type="text/javascript">



function domTable(){

    var rowCount = 10;

    var cellCount = 10;

    var tb = document.createElement("table");

    var tbody_node=document.createElement("tbody");

    tb.border = 1;

    tb.cellspacing = 2;

    tb.cellpadding = 2;

    for(var i=0; i<rowCount; i++){

        var tr = document.createElement("tr");

        for(var j=0; j<rowCount; j++){

            var td = document.createElement("td");

            td.innerHTML = i + "-" + j;

            tr.appendChild(td);

        }

        tbody_node.appendChild(tr);

        

    }

    tb.appendChild(tbody_node);

    document.getElementById("container").appendChild(tb);

    if(tb.outerHTML)document.getElementById("code").value = tb.outerHTML;

}



function radioGroup(){

    var count = 10;

    var checkedIndex = 4;

    var groupName = "test";

    var frag = document.createDocumentFragment();

    for(var i=0; i<count; i++){

		var r

		if(document.all){

			r= document.createElement("<input name='testRadioName'>"); //这里

			 r.type = "radio";

		}else{

			r= document.createElement("input"); //这里

			r.type = "radio";

			r.name="text"

		}

        

       // r.name = "test";  //这个方法好象不行

        r.id = groupName + "_" + i;



        var label = document.createElement("label");

        label.innerHTML = r.id;

        label['for'] = r.id;

        if(i == checkedIndex) r.checked = true;

        frag.appendChild(r);

        frag.appendChild(label);

    }

    document.getElementById("container").appendChild(frag);

}

domTable();

radioGroup();



</script>



</body>

</html>

只有这样了，那个label如何添加"for"，我也不知道

上面的有人说可以用
/**//*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
来解决，我弄了好像不行

Navymk 2008-06-05

打赏
举报

给label添加for,我用过一个办法,create一个span,把lable带for的html字串放进去.倒是可以用.
最初是先做dom,把checkbox节点添加进去,然后dom.innerHTML+=labelString,结果就无法获取先前添加的checkbox的状态了.最终还是得用dom方式添加才不会影响原来的checkbox.
可就是太麻烦了.

Navymk 2008-06-05

打赏
举报

var r = document.createElement("<input type='radio' name='test'/>");
这在ff下不行

mingxuan3000 2008-06-05

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>



</head>



<body>

<textarea cols="100" rows="20" id="code"></textarea>

<div id="container">aaaaa</div>

<script type="text/javascript">



function domTable(){

    var rowCount = 10;

    var cellCount = 10;

    var tb = document.createElement("table");

    var tbody_node=document.createElement("tbody");

    tb.border = 1;

    tb.cellspacing = 2;

    tb.cellpadding = 2;

    for(var i=0; i<rowCount; i++){

        var tr = document.createElement("tr");

        for(var j=0; j<rowCount; j++){

            var td = document.createElement("td");

            td.innerHTML = i + "-" + j;

            tr.appendChild(td);

        }

        tbody_node.appendChild(tr);

        

    }

    tb.appendChild(tbody_node);

    document.getElementById("container").appendChild(tb);

    if(tb.outerHTML)document.getElementById("code").value = tb.outerHTML;

}



function radioGroup(){

    var count = 10;

    var checkedIndex = 4;

    var groupName = "test";

    var frag = document.createDocumentFragment();

    for(var i=0; i<count; i++){

        var r = document.createElement("<input type='radio' name='test'/>"); //这里

        //r.type = "radio";

        //r.name = groupName;  //这个方法好象不行

        r.id = groupName + "_" + i;

        

        var label = document.createElement("label");

        label.innerHTML = r.id;

        label['for'] = r.id;

        if(i == checkedIndex) r.checked = true;

        frag.appendChild(r);

        frag.appendChild(label);

    }

    document.getElementById("container").appendChild(frag);

}

domTable();

radioGroup();



</script>



</body>

</html>

哦下面的没注意这样可以了

Navymk 2008-06-05

打赏
举报

恩,table可以咯~等radiogroup和label了.

mingxuan3000 2008-06-05

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>



</head>



<body>

<textarea cols="100" rows="20" id="code"></textarea>

<div id="container">aaaaa</div>

<script type="text/javascript">



function domTable(){

    var rowCount = 10;

    var cellCount = 10;

    var tb = document.createElement("table");

	var tbody_node=document.createElement("tbody");

    tb.border = 1;

    tb.cellspacing = 2;

    tb.cellpadding = 2;

    for(var i=0; i<rowCount; i++){

        var tr = document.createElement("tr");

        for(var j=0; j<rowCount; j++){

            var td = document.createElement("td");

            td.innerHTML = i + "-" + j;

            tr.appendChild(td);

        }

		tbody_node.appendChild(tr);

        

    }

	tb.appendChild(tbody_node);

    document.getElementById("container").appendChild(tb);

    if(tb.outerHTML)document.getElementById("code").value = tb.outerHTML;

}



function radioGroup(){

    var count = 10;

    var checkedIndex = 4;

    var groupName = "test";

    var frag = document.createDocumentFragment();

    for(var i=0; i<count; i++){

        var r = document.createElement("input");

        r.type = "radio";

        r.name = groupName;

        r.id = groupName + "_" + i;

        

        var label = document.createElement("label");

        label.innerHTML = r.id;

        label['for'] = r.id;

        if(i == checkedIndex) r.checked = true;

        frag.appendChild(r);

        frag.appendChild(label);

    }

    document.getElementById("container").appendChild(frag);

}

domTable();

radioGroup();



</script>



</body>

</html>

mingxuan3000 2008-06-05

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<textarea cols="100" rows="20" id="code"></textarea>
<div id="container">aaaaa</div>
<script type="text/javascript">

function domTable(){
var rowCount = 10;
var cellCount = 10;
var tb = document.createElement("table");
var tbody_node=document.createElement("tbody");
tb.border = 1;
tb.cellspacing = 2;
tb.cellpadding = 2;
for(var i=0; i<rowCount; i++){
var tr = document.createElement("tr");
for(var j=0; j<rowCount; j++){
var td = document.createElement("td");
td.innerHTML = i + "-" + j;
tr.appendChild(td);
}
tbody_node.appendChild(tr);

}
tb.appendChild(tbody_node);
document.getElementById("container").appendChild(tb);
if(tb.outerHTML)document.getElementById("code").value = tb.outerHTML;
}

function radioGroup(){
var count = 10;
var checkedIndex = 4;
var groupName = "test";
var frag = document.createDocumentFragment();
for(var i=0; i<count; i++){
var r = document.createElement("input");
r.type = "radio";
r.name = groupName;
r.id = groupName + "_" + i;

var label = document.createElement("label");
label.innerHTML = r.id;
label['for'] = r.id;
if(i == checkedIndex) r.checked = true;
frag.appendChild(r);
frag.appendChild(label);
}
document.getElementById("container").appendChild(frag);
}
domTable();
radioGroup();

</script>

</body>
</html>

//创建TBody
var tbody_node=document.createElement("tbody");

table 下是tbody ，tbody 下是 tr

面试宝典一、HTML和CSS 1 1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 1 ... 1 ...3. Quirks模式是什么？...6. 你能描述一下渐进增强和优雅降级之间的不同吗? 3 7. 为什么利用多个域名来存...

前端面试题汇总一、HTML和CSS 171、你做的页面在哪些流览器测试过？...它和Standards模式有什么区别 174、div+css的布局较table布局有什么优点？ 195、 img的alt与title有何异同？ strong与em的异...

1、checkbox 和radiobox在IE下呈纵向显示的问题添加如下css解决: [code="css"] .x-form-check-wrap,.x-form-radio-wrap{padding:3px 0 0 0;line-height:15px;width:150px;} x-form-check-gr...

面试宝典一、HTML和CSS 211. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 212.... 213....它和Standards模式有什么区别 214. div+css的布局较table布局有什么优点？ 225. img的alt与titl...

大家好，给大家分享一下手机总是出现感谢您选择中国移动是怎么回事，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！面试宝典一、HTML和CSS 211.... div+css的布局较table布局有什么优点？ 225. img的alt