Javascript IE中的document.getElementById（）不工作？但需要不同的解决方案_Javascript_Internet Explorer_Overflow_Getelementbyid_Css Tables

Javascript IE中的document.getElementById（）不工作？但需要不同的解决方案

javascript internet-explorer

Javascript IE中的document.getElementById（）不工作？但需要不同的解决方案,javascript,internet-explorer,overflow,getelementbyid,css-tables,Javascript,Internet Explorer,Overflow,Getelementbyid,Css Tables,使用下面的代码，我试图在使用“下一步”按钮时创建一个显示5个隐藏div的div。但是，这在IE中不起作用，因为在线： document.getElementById("pic_container" + c).innerHTML += "<tr id='pic_row" + rowNum + "'></tr>"; document.getElementById（“pic_容器”+c）.innerHTML+=”；正在尝试更改表的内部html，我知道IE不喜欢。如果有人能

使用下面的代码，我试图在使用“下一步”按钮时创建一个显示5个隐藏div的div。但是，这在IE中不起作用，因为在线：

document.getElementById("pic_container" + c).innerHTML += "<tr id='pic_row" + rowNum + "'></tr>";

document.getElementById（“pic_容器”+c）.innerHTML+=”；

正在尝试更改表的内部html，我知道IE不喜欢。如果有人能给我一个解决这个问题的替代方案，请随时告诉我。我在网上找到的解决方案中没有一个对我有帮助，包括td的样式和所有那些胡言乱语

<html>

<head>
<style>

#container
{
height:256px;
width:517px;
overflow:hidden;
border:1px solid black;

}

.pic_container
{
height:256px;
width:418px;
margin-left:50px;
margin-right:50px;
background-color:yellow;
position:relative;
}

.pic_container input
{
margin-left:47px;
}

.image
{
background-color:red;
height:100px;
width:100px;
}

.image2
{
background-color:blue;
height:50px;
width:50px;
}

</style>

<script>
var num = 1;

function loadDivs(){
var rowNum = 0;
var picNum = 1;
for(var c = 1; c<= 5; c++){
    document.getElementById("container").innerHTML += "<div  class='pic_container'><table id='pic_container" + c + "'></table></div>";
    for(var x = 0; x<4; x++){
        document.getElementById("pic_container" + c).innerHTML += "<tr id='pic_row" + rowNum + "'></tr>";
        if(x == 0){
            for(var dimg = 1; dimg <=4; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><div class='image'></div></td>";
                }
            }
        else if(x ==1){
            for(var dimg = 1; dimg <=4; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><input type='radio' name='imageChooser' value='Pic " + picNum + "'/></td>";
                picNum++;
                }
            }
        else if(x == 2){
            for(var dimg = 5; dimg <=8; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><div class='image'></div></td>";
                }
            }
        else{
            for(var dimg = 5; dimg <=8; dimg++){
                document.getElementById("pic_row" + rowNum).innerHTML += "<td><input type='radio' name='imageChooser' value='Pic " + picNum + "'/></td>";
                picNum++;
                }
            }
        rowNum++;
        }
    }
}

function decrement(){  if(num > 1) num--; }
function increment(){ if(num < 5) num++; }

function getNextId(){ window.location =  "#pic_container" + num;}

function display(){ 
var rads = document.getElementsByName("imageChooser");
for(var i = 0; i < rads.length; i++){
    if(rads[i].checked){ document.getElementById("disp_div").innerHTML = rads[i].value;
    }
}
}
</script>
</head>
<body onLoad="loadDivs()">
    <div id="container">
    </div>

    <a href="javascript:increment(); javascript:getNextId();">Next</a>
    <a href="javascript:decrement(); javascript:getNextId();">Back</a>
    <a href="javascript:display();">Select</a>
    <div id="disp_div"></div>
</body>
</html>


#容器
{
高度：256px；
宽度：517px；
溢出：隐藏；
边框：1px纯黑；
}
.picu集装箱
{
高度：256px；
宽度：418px；
左边距：50像素；
右边距：50px；
背景颜色：黄色；
位置：相对位置；
}
.picu容器输入
{
左边距：47px；
}
.形象
{
背景色：红色；
高度：100px；
宽度：100px；
}
.image2
{
背景颜色：蓝色；
高度：50px；
宽度：50px；
}
var-num=1；
函数loadDivs（）{
var-rowNum=0；
var picNum=1；
对于（var c=1；c1）num--；}
函数增量（）{if（num<5）num++；}
函数getNextId（）{window.location=“#pic_容器”+num；}
函数display（）{
var rads=document.getElementsByName（“图像选择器”）；
对于（变量i=0；i

我根本不会使用

innerHTML

。而是使用

appendChild

查看演示：

这是您想要的吗

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var num = 1;

function loadDivs() {
    var rowNum = 0;
    var picNum = 1;
    for (var c=1; c<=5; c++) {
        $("#container").html($("#container").html() + "<div class='pic_container'><table id='pic_container" + c + "'></table></div>");
        for(var x=0; x<4; x++) {
            $("#pic_container" + c).html($("#pic_container" + c).html() + "<tr id='pic_row" + rowNum + "'></tr>");
            switch (x) {
            case 0:
                for(var dimg = 1; dimg <=4; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><div class='image'></div></td>");
                break;
            case 1:
                for(var dimg = 1; dimg <=4; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><input type='radio' name='imageChooser' value='Pic " + (picNum++) + "'/></td>");
                break;
            case 2:
                for(var dimg = 5; dimg <=8; dimg++)
                    $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><div class='image'></div></td>");
                break;
            default:
                for(var dimg = 5; dimg <=8; dimg++)
                   $("#pic_row" + rowNum).html($("#pic_row" + rowNum).html() + "<td><input type='radio' name='imageChooser' value='Pic " + (picNum++) + "'/></td>");
            }
        rowNum++;
        }
    }
}

function decrement(){ num = Math.max(1, --num); }
function increment(){ num = Math.min(5, ++num); }

function getNextId(){ window.location =  "#pic_container" + num;}

function display(){ 
    $("input[name='imageChooser']").each(function() {
            if ($(this).prop("checked")) $("#disp_div").html($(this).val());
        });
}
</script>


var-num=1；
函数loadDivs（）{
var-rowNum=0；
var picNum=1；
对于（var c=1；ca有一点改进：而不是：$（“#容器”）.html（$（“#容器”）.html（）+“新代码”）；
使用：$（“#容器”）.html（函数（i，h）{返回h+“新代码”；}）
检查您的代码在技术上更长，但肯定更干净。感谢您向我指出该功能。如果选择器更长，则我的代码可能比您的代码更短：）顺便说一句，使用jQuery需要+1。当然，如果选择器只是一个ID，那么性能不会有太大的影响，但是如果它是一个更复杂的选择器，那么重复使用选择器将浪费计算时间。当然，这是可行的。但是，我限制在这个项目中使用dojo。我将研究一种方法，在t中使用dojo而不是jQuery他的，如果可能的话。如果不可能，那么我将用jQuery解决方案来论证我的观点！再次感谢！