[英]How to add a dynamic image to a specific cell in a table using JQuery?
下面是我用來將用戶在模態中輸入的特定輸入值添加到使用 JQuery 的表的代碼,但是我正在努力將圖像輸入到表中,用戶將使用文件選擇他們想要的圖像使用#insert-image
的 ID 的表單輸入。 這是我到目前為止不起作用的代碼:
$("#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");
任何幫助將非常感激。
您可以添加事件偵聽器來偵聽在 HTML input
元素上選擇圖像后觸發的事件。
選擇圖像后,您可以讀取它的數據並將其渲染到客戶端:
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
$('td:contains("image")').find('img').attr('src', evt.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
將您的input
綁定到上述函數將更改位於td:contains("image")
下的img
元素的src
屬性。
我所要做的就是修復引號以便將imagePrep
變量添加到tag
。
這是更正后的代碼:
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image'>").addClass("text-center");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.