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

  }
}

Answer 2

有几种方法可以做到这一点。

首先，您可以将已创建的所有color_image个imgs存储到数组中，以便为它们提供“假索引”。您可以参考后续创建的color_image imgs的数组长度来为它们提供最新的ID。所以每个color_image imgs看起来都像img id ='color_image[id]'，其中[id]是数组的索引。

其次，如果您只为color_image使用img标记，则可以使用document.getElementsByTagName来获取imgs数组。

第三，如果您使用的是jQuery，则可以使用$('.color_image:eq([id])')唯一标识每个color_image，并将您的代码设置为使用class而不是id

仅为新创建的行更改元素ID

2 个答案: