document.getElementById () в IE не работает? Исследовал, но нужно другое решение - PullRequest
Новая
       18

document.getElementById () в IE не работает? Исследовал, но нужно другое решение

0 голосов
/ 25 августа 2011

Используя приведенный ниже код, я пытаюсь создать div с отображением 5 скрытых div при использовании кнопки Next.Тем не менее, это не работает в IE, потому что в строке: 

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

пытается изменить внутренний HTML-код таблицы, что, я знаю, IE не нравится.Если кто-нибудь может дать мне альтернативное решение этой проблемы, дайте мне знать.Ни одно из решений, которые я нашел в Интернете, не помогло мне с дизайном td's и всего этого 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>

Ответы [ 2 ]

1 голос
/ 31 августа 2011

Это то, что вы хотели? 

<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>
0 голосов
/ 31 августа 2011

Ну, я бы не стал использовать innerHTML вообще. Скорее используйте appendChild.

Проверьте демо: http://jsfiddle.net/roberkules/v76WS/

...