时间戳

首页 > 解决方案 > 管理动态生成表的元素

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>

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

标签： javascripthtml

解决方案

有了这种东西，你不应该调用和复制 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>

推荐阅读