Показать изображения в ячейках таблицы

Я хотел бы создать таблицу 13 x 4 и вставить изображение, названное back.gif в каждую ячейку. Это не работает.Показать изображения в ячейках таблицы

Ошибка с линией 'td1.appendChild (backImg);' но я не могу понять это.

Мой код выглядит следующим образом:

<script> 

var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">'); 
var cardSet = new Array (0,1,2,3,4); 

var table = document.createElement('table'); 
for (var i = 0; i < 4; i++){ 
    var tr = document.createElement('tr'); 
    for (var j = 0; j<13; j++){ 
     var td1 = document.createElement('td'); 
     var backImg = document.getElementById("imageBack"); 
     //backImg.src = "back.gif"; 

    td1.appendChild(backImg); 
    tr.appendChild(td1); 
    table.appendChild(tr); 
    } 
} 
document.body.appendChild(table); 

    </script> 

    <img id="imageBack" src="back.gif" height="90" /> 

</body>

источник

2016-05-24 Big Spudnuts

Попробуйте переместить сценарий ниже IMG тега. Вы пытаетесь ссылаться на элемент перед его созданием. Кроме того, appendChild будет перемещать ваш img в каждую ячейку, а не копировать ее. Вам нужно создать новое изображение для каждой ячейки. – rcpinto

Попробуйте это:

$(document).ready(function(){ 
    var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">'); 
    var cardSet = new Array (0,1,2,3,4); 

    var table = document.createElement('table'); 
    for (var i = 0; i < 4; i++){ 
     var tr = document.createElement('tr'); 
     for (var j = 0; j<13; j++){ 
      var td1 = document.createElement('td'); 
      //create here your img element and set the src 
      var img = document.createElement("img"); 
      img.setAttribute("src", "back.gif"); 
      td1.appendChild(img); 
      tr.appendChild(td1); 
      table.appendChild(tr); 
     } 
    } 
    document.body.appendChild(table); 
});

источник

2016-05-24 09:22:14 cralfaro

спасибо огромное, что cralfaro. Просто любопытно, знаете ли вы, как я могу добавить изображения в массив preLoadImages в таблицу после действия пользователя (например, нажатие кнопки?) –

Вы можете загрузить массив со списком путей изображений и для каждой позиции, создать изображение с этим src и добавить к td-tr. И запускайте все, когда пользователь нажимает на какую-то кнопку. Должно сработать – cralfaro

Есть несколько вещей происходит не так:

document.getElementById вернется null, потому что <img> еще не построенный к тому моменту, когда ваш код казнены.
Вы не клонируете изображение, но повторно используете его
Если вы хотите клонировать изображение, вам нужно будет создать новый id для каждого экземпляра изображения.

Вы можете попытаться создать код <img>, код document.createElement("img").

var createBackImg = function() { 
    var newImg = document.createElement("img"); 
    newImg.src = "back.gif"; 
    newImg.height = 90; 
    return newImg; 
}

Затем вы можете использовать append, чтобы добавить его в DOM.

источник

2016-05-24 09:21:58 user3297291

Вот ваше решение

<head> 
    <script> 
function myFunction(){ 
    var preLoadImages = new Array('<img src=\"0.png\">','<img src=\"1.png\">','<img src=\"2.png\">','<img src=\"3.png\">'); 
    var cardSet = new Array (0,1,2,3,4); 
    var table = document.createElement('table'); 

    for (var i = 0; i < 4; i++){ 
    var tr = document.createElement('tr'); 
    for (var j = 0; j<13; j++){ 
     var td1 = document.createElement('td'); 
     var backImg = document.createElement("img"); 
     backImg.src = "images/back.gif"; 
     td1.appendChild(backImg); 
     tr.appendChild(td1); 
     table.appendChild(tr); 
    } 
    } 
    document.body.appendChild(table); 
    alert("myFunc"); 
} 
    </script> 

</head> 
<body onload="myFunction()"> 


</body>

источник

2016-05-24 09:28:55

Показать изображения в ячейках таблицы

ответ

Смежные вопросы