Question

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

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

正在尝试更改表的内部html，我知道IE不喜欢。如果有人能给我一个解决这个问题的替代方案，请随时告诉我。我在网上找到的所有解决方案都没有帮助我，因为它具有td和所有那些mumbo jumbo的风格。

<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>

Answer 1

这是你想要的吗？

<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>

Answer 2

好吧，我根本不会使用innerHTML。而是使用appendChild。

查看演示：http://jsfiddle.net/roberkules/v76WS/

IE中的document.getElementById（）无效？研究但需要不同的解决方案

2 个答案: