Question

我循环遍历表中的图像，尝试获取源，然后将该src应用于不同表中的新图像。我已经设法在新的表格单元格中进行了创建新的图像对象（已测试），但出于某种原因，我可以得到的是要显示的最后一个图像。好吧，实际上我知道这是因为循环每次写入变量并且在应用它时它具有最后一个值，但我不知道如何获取它们。这是相关的代码。如果您需要更多信息，请参阅Why can't I get my images to appear in table cells/nodes.. maybe I can get some closure?感谢您的帮助。

newImages = newTable.getElementsByTagName('img');

for(var i = 0; i < newImages.length; i += 1) {
    var picSource = newImages[i]['src'];
    console.log(picSource);//This logs the path to the four different images
    var newImg = new Image();//creates a new image for each
    newImg.src = picSource;//gives each image src?? Just gives the last image
}

Answer 1

有两种方法可以解决这个问题：创建新的 img 元素并复制 src 属性，或者只是克隆元素。例如，如果您有下表：

<table id="t0">
 <tr><td><img src="a.png">
 <tr><td><img src="b.png">
 <tr><td><img src="c.png">
</table>

您可以使用 document.images 获取文档中的所有图像，但您只需要表格中的图像，这样就可以：

var images = document.getElementById('t0').getElementsByTagName('img')

这是一个实时收藏（如果您在表格中添加或删除图像，它会自动更新），或使用选择器：

var images = document.querySelectorAll('#t0 img')

这是一个静态集合，无论你对表做什么都保持不变。所有正在使用的浏览器都支持第一种方法，但大多数方法也支持选择器版本。

要通过复制 src 属性制作具有相同图像的另一个表，您可以这样做：

var table = document.createElement('table');
var row, cell, img;

for (var i=0, iLen=images.length; i<iLen; i++) {  
  row = table.insertRow(-1);
  cell = row.insertCell(-1);

  // create new image and append to cell
  img = new Image();
  img.src = images[i].src;
  cell.appendChild(img);
}

使用克隆方法，最后3行可以替换为：

  cell.appendChild(images[i].cloneNode(false));

最后，将新表添加到文档中：

document.body.appendChild(table);

如何在表格中循环图像，获取所有图像的src并应用于新表格中的新图像？

1 个答案: