如何使用 JQuery 将动态图像添加到表格中的特定单元格？

Question

下面是我用来将用户在模式中输入的特定输入值添加到使用 JQuery 的表中的代码，但是我正在努力将图像输入到表中，用户将使用文件选择他们想要的图像使用 的 ID 的表单输入#insert-image。这是我到目前为止不起作用的代码：

$("#btnAdd").on('click', function() {

  if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {

    var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, '');

    let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>'

    $('tbody').append(row);

    $('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center");

    $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover")

    $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete").on('click', function() {

      $(this).parent('tr').remove();

    });

  }

});

所以基本上有问题的行是这样的：

$('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center");

任何帮助将非常感激。

Answer 1

您可以添加事件侦听器来侦听在 HTMLinput元素上选择图像后触发的事件。选择图像后，您可以读取它的数据并将其渲染到客户端：function readImage(input) {&nbsp; &nbsp; if (input.files && input.files[0]) {&nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function (evt) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('td:contains("image")').find('img').attr('src', evt.target.result);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(input.files[0]);&nbsp; &nbsp; }}将您绑定input到上述函数将更改位于 下的元素src的属性。imgtd:contains("image")

Answer 2

我所要做的就是修复引号，以便将imagePrep变量添加到tag.这是更正后的代码：$('td:contains("image")').html("<img&nbsp;src="&nbsp;+&nbsp;imagePrep&nbsp;+&nbsp;"&nbsp;alt='selected-image'>").addClass("text-center");