Question

一个按钮onclick，添加了一个包含三个单元格的表格行。在第一个单元格中有一个文本框，您可以在其中输入图像URL，第二个单元格包含一个按钮。当按下该按钮时，将在第三个单元格上显示URL引用的图像。为一行执行此操作很简单，但是我无法使其用于后续行，因为每个元素的ID都将保持不变。我需要一些提示和想法。

代码示例：

<script>
  var u = 1;


  function addRows() {
    var table = document.getElementById("t1");
    var row = table.insertRow(u);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);


    cell1.innerHTML = '<input id="ur" type="url" >';
    cell2.innerHTML = '<button onclick="document.getElementById(\'im1\').src = document.getElementById(\'ur\').value;">Add Image</button>';
    cell3.innerHTML = '<img id="im1" src="" alt="image">';

    u++;
  }
</script>

每行都会很好地生成，如果您输入url或本地图像文件的名称，它将正确显示在第三个单元格上。但这仅适用于生成的第一行。

Answer 1

使用这种方法，您不应调用和复制ID，而应依赖于Sibling属性。然而，快速的技巧是使用您的增量变量为元素赋予唯一的ID。

var u = 1;


       function addRows(){
           var table = document.getElementById("t1");
           var row = table.insertRow(u);
           var cell1 = row.insertCell(0);
           var cell2 = row.insertCell(1);
           var cell3 = row.insertCell(2);


           cell1.innerHTML = '<input id="ur'+u'" type="url" >' ;
           cell2.innerHTML = '<button onclick="document.getElementById(\'im'+u'\').src = document.getElementById(\'ur'+u+'\').value;">Add Image</button>' ;
           cell3.innerHTML = '<img id="im'+u+'" src="" alt="image">' ;

           u++;
        }     
    </script>

Answer 2

这应该有效：

function addRow() {
  var table = document.getElementById("tab");
  
  var row          = document.createElement("tr");
  var buttonTd     = document.createElement("td");
  var button       = document.createElement("button");
  button.type      = "button";
  button.innerHTML = "Show image";
  buttonTd.appendChild(button);
  var textboxTd    = document.createElement("td");
  var textbox      = document.createElement("input");
  textbox.type     = "text";
  textboxTd.appendChild(textbox);
  var imageTd      = document.createElement("td");
  var image        = document.createElement("img");
  imageTd.appendChild(image);
  row.appendChild(textboxTd);
  row.appendChild(buttonTd);
  row.appendChild(imageTd);
  
  button.addEventListener("mousedown", function () {
    image.src = textbox.value;
  });
  
  table.appendChild(row);
}

table,tr,td {
  border: 1px solid black;
  border-collapse: collapse;
}

<button onclick="addRow()">Add Row</button>

<table id="tab"></table>

管理动态生成的表的元素

2 个答案: