javascript - 仅更改新创建的行的元素 id

Question

所以我有这个功能

function addRow(tableID) {

      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
      var colCount = table.rows[0].cells.length;

      for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
          case "text":
            newcell.childNodes[0].value = "";
            break;
          case "checkbox":
            newcell.childNodes[0].checked = false;
            break;

        }

      }
    }

我也有这个表格模板

 <tbody>
    <tr>
        <td>
            <input type="checkbox" class="m-t-10" name="chk" />
        </td>
        <td>
            <input class="input" type="text" name="p_color_name[]" placeholder="Red,  Blue etc..">
        </td>

        <td>
            <input class="input" type="text" name="p_color_price[]" placeholder="Price">
        </td>

        <td>
            <input class="input" type="text" name="p_color_stock[]" placeholder="Stock">
        </td>
        <td>
            <div>
                <div class="file">
                    <label class="file-label">
                        <input class="file-input" type="file" name="p_color_image[]" onchange="document.getElementById('color_image').src = window.URL.createObjectURL(this.files[0])">
                        <span class="file-cta">
                            <span class="file-icon">
                                <i class="fa fa-upload"></i>
                            </span>
                            <span class="file-label">
                                Choose Multiple Files...
                            </span>
                        </span>
                    </label>
                </div>
            </div>
        </td>
        <td>
            <div class="image" style="width:60px;">
                <img id="color_image" class="color_image" src="" alt="">
            </div>
        </td>
    </tr>
</tbody> 

该函数像上面一样添加一个新行。

现在我想要的是将img元素id更改为color_image1或其他内容，并将onchange函数getelementbyid更改为img元素的id，这样它就能够定位该元素并预览用户上传的图像

我正在寻找的最终结果是我有一个图像文件上传，并且我以带有 onchange 函数的 img 元素为目标，并在上传之前预览图像。

有人对如何做到这一点有任何建议吗？

Answer 1

您可以在创建新行后通过仅搜索新行的子行来搜索 color_image ID。

例如:

function addRow(tableID) {

  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;


    //your existing loop ...
    .
    .

    var imageElement = row.querySelector("#color_image");
    // you can change the id now

    //do similar for the input/onchange

  }
}