Javascript 管理动态生成表的元素

按钮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>

var u=1；
函数addRows（）{
var table=document.getElementById（“t1”）；
var row=表.插入行（u）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=''；
cell2.innerHTML='添加图像'；
cell3.innerHTML=''；
u++；
}

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

---

但是它只对第一个生成的行起作用。

对于这种情况，您不应该调用和复制ID，而应该依赖同级属性。然而，一个快速的方法是使用增量变量为元素提供唯一的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>

var u=1；
函数addRows（）{
var table=document.getElementById（“t1”）；
var row=表.插入行（u）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=''；
cell2.innerHTML='添加图像'；
cell3.innerHTML=''；
u++；
}     

这应该可以：

函数addRow（）{
var table=document.getElementById（“选项卡”）；
var行=document.createElement（“tr”）；
var buttonTd=document.createElement（“td”）；
var button=document.createElement（“按钮”）；
button.type=“button”；
button.innerHTML=“显示图像”；
按钮D.追加子项（按钮）；
var textboxTd=document.createElement（“td”）；
var textbox=document.createElement（“输入”）；
textbox.type=“text”；
textboxTd.appendChild（textbox）；
var imageTd=document.createElement（“td”）；
var image=document.createElement（“img”）；
imageTd.appendChild（图像）；
行.appendChild（textboxTd）；
行。追加子项（按钮D）；
行。追加子行（imageTd）；
按钮。addEventListener（“鼠标向下”，函数（）{
image.src=textbox.value；
});
表2.追加子项（行）；
}

表格，tr，td{
边框：1px纯黑；
边界塌陷：塌陷；
}

添加行

您需要显示您所做工作的一些代码！将代码显示为文本而不是图像。您可以将参数传递给addRows（）函数-参数将是当前ID。在函数中，您可以使用此参数（当前ID）并添加随机值，以便每次都将收到一个新的唯一ID。一个页面上的多个元素不应使用

ID

。如果需要，您还可以使用动态生成的

id

，并从文本中获取值。在每一行中复制JS代码并不是一个好的开始方式。如果我是你（除了主要问题），我会为所有添加的按钮创建一个侦听器，而不是为每个按钮添加onclick事件。