为什么我无法让我的图像出现在表格单元格/节点中.也许我可以得到一些结束

Why can't I get my images to appear in table cells/nodes.. maybe I can get some closure?

本文关键字：也许 节点 我可以 结束 单元格 表格 我的 图像 为什么      更新时间：2023-09-26

我想在新表的每个单元格中添加一个新图像，并为其提供与旧表相同的源，然后使其可单击。首先，我这样做了：

function showData() {
  if (localStorage.getItem(name) !== null) {
    var showme = localStorage.getItem(name);
    alert("I got the table");
    var newTable = document.createElement('table');
    newTable.innerHTML = showme;
    newTable.id = "newTable";
    newNumRows = newTable.getElementsByTagName('tr').length;
    newNumCells = newTable.getElementsByTagName('td').length;
    newNumCols = newNumCells / newNumRows;
    alert(newNumRows);
    alert(newNumCells);
    alert(newNumCols);
    var newImages = newTable.getElementsByTagName('img');
    for (var i = 0; i < newImages.length; i += 1) {
      var picSource = newImages[i]['src'];
      console.log(picSource);
    }
    function addNewImage(newNumCols) {
      var newImg = new Image();
      newImg.src = picSource;
      col.appendChild(newImg);
      newImg.onclick = function() {
        alert("WOW");
      };
    }
    for (r = 0; r < newNumRows; r++) {
      row = newTable.insertRow(-1);
      for (c = 0; c < newNumCols; c++) {
        col = row.insertCell(-1);
        addNewImage(newNumCols);
      }
    }
    var showIt = document.getElementById('holdTable');
    showIt.appendChild(newTable);
  }
}

这在一定程度上有效，但不幸的是，只显示了最后一个图像。所以，我环顾四周，我认为这与关闭有关（对任何重复表示歉意），但这是一个我真的很难理解的概念。然后我尝试了这个：

function showData() {
  if (localStorage.getItem(name) !== null) {
    hideTaskForm();
    var showme = localStorage.getItem(name);
    var oldTable = document.createElement('table');
    oldTable.innerHTML = showme;
    newTable = document.createElement('table');
    newTable.id = "newTable";
    var i, r, c, j;
    newNumRows = oldTable.getElementsByTagName('tr').length;
    newNumCells = oldTable.getElementsByTagName('td').length;
    newNumCols = newNumCells / newNumRows;
    var newTableCells = newTable.getElementsByTagName('td');
    var getImages = oldTable.getElementsByTagName('img');
    for (r = 0; r < newNumRows; r++) {
      row = newTable.insertRow(-1);
      for (c = 0; c < newNumCols; c++) {
        makeNodes = row.insertCell(-1);
      }
    }
    for (var j = 0; j < newTableCells.length; j++) {
      var theNodeImage = document.createElement("img");
      newTableCells[j].appendChild(theNodeImage);
      alert(newTableCells[j].innerHTML); //This gives me img tags
    }
    for (i = 0; i < getImages.length; i += 1) {
      var oldSource = getImages[i]['src']; //gets the src of the images from the saved table
      console.log(oldSource);
      //alert(oldSource);//successfully alerts the image paths
      var newPic = new Image(); //creates a new image
      (function(newPic, oldSource) {
        newPic.src = oldSource;
        alert(newPic.src); //gives the same image paths
        newTable.getElementsByTagName('img').src = newPic.src; //This doesn't work - table is blank???
      })(newPic, oldSource);
    }
    var showIt = document.getElementById('holdTable');
    showIt.appendChild(newTable);
  }
}

现在，这不会引发任何错误。但是，它也没有填满桌子。它确实给了我源代码，我想我已经创建了新的图像对象以附加到 newTableCell 中的 img 标签，但表格显示为空白。我不知道我哪里出错了。所有的帮助真的很受欢迎。

注意：即使作为一个业余爱好者，即使我知道可能有很多更有效的方法可以做到这一点，但我故意这样做是为了帮助我理解我正在采取的每一步的逻辑。

在你的代码中，你有：

var newImages = newTable.getElementsByTagName('img');
for (var i = 0; i < newImages.length; i += 1) {
  var picSource = newImages[i]['src'];
  console.log(picSource);
}

最后，picSource 具有最后一个图像的 src 属性的值。然后是：

function addNewImage(newNumCols) {
  var newImg = new Image();
  newImg.src = picSource;
  col.appendChild(newImg);
  newImg.onclick = function() {
    alert("WOW");
  };
}

值被传递给 newNumCols，但不在函数中使用。picSource 的值来自外部执行上下文，并且没有更改，因此它仍然是上一个 for 循环中的最后一个图像 src。

for (r = 0; r < newNumRows; r++) {
  row = newTable.insertRow(-1);
  for (c = 0; c < newNumCols; c++) {
    col = row.insertCell(-1);
    addNewImage(newNumCols);
  }
}

这个循环只是使用函数中未使用的单个参数不断调用 addNewImage，因此您可以一遍又一遍地获得相同的图像。

作为记录，addNewImage 函数确实对 picSource 有一个闭包，但它对外部执行上下文的所有变量也有一个闭包。这不是问题所在，尽管它可能掩盖了您没有在每次调用时为 picSource 设置值的事实，因此您可以获得上一节代码中的剩余值。

您尚未提供任何 showme 内容的指示，因此无法确定此方法是否有效。

注意

您在哪里：

var showme = localStorage.getItem(name);
alert("I got the table");
var newTable = document.createElement('table');
newTable.innerHTML = showme;
newTable.id = "newTable";

IE 不支持设置表元素的 innerHTML 属性，但您可以创建整个表作为其他元素的 innerHTML 并设置单元格的 innerHTML （tr， th）。如果要使用此方法，请考虑：

var div = document.createElement('div');
div.innerHTML = '<table id="newTable">' + showme + '<'/table>';
var newTable = div.firstChild;
相关文章：