friend 们， 我希望一切都好。实际上，我正面临这个问题。 我们可以将 HTML 表行值显示到文本框中，所以如果我们想从表行中获取图像并将其显示在 div 中，我们该怎么做呢？所以使用这些代码，我可以从 HTML 表行中获取值以发送给文本框，所以我如何在 jquery 中获取图像。
//HTML Codes
<div class="md-form mb-5" style="margin-top:-10px;">
<div class="down" >
<a href="#" id="imgS"><img src="images/IT.jpg"></a>
</div>
</div>
<div class="md-form mb-5" style="margin-left:130px;">
<div class="input-group-prepend" >
<span class="input-group-text" style=" width:35px;">ID</span>
</div>
<input type="text" name="txtSId" id="txtSId" class="form-control"
aria-label="Amount (rounded to the nearest dollar)" aria-
describedby="basic-addon">
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" name="txtSName" id="txtSName" class="form-control"
aria-label="Amount (rounded to the nearest dollar)">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Position</span>
</div>
<input type="text" name="txtSPosition" id="txtSPosition" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Facebook </span>
</div>
<input type="text" name="txtSFacebook" id="txtSFacebook" class="form-
control">
</div></div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"> Twitter</span>
</div>
<input type="text" name="txtSTwitter" id="txtSTwitter" class="form-
control">
</div>
</div>
<div class="md-form mb-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">G<strong>+</strong></span>
</div>
<input type="text" name="txtSGoogleplus" id="txtSGoogleplus"
class="form-control">
</div>
</div></div>
<script>
// For View data
$(document).ready(function(){
$("#dtBasicExample tbody").on('click','tr',function(){
$("#txtSelect").text("1 row selected");
var rowData=$(this).children("td").map(function(){
return $(this).text();
}).get();
$("#txtSId").val(rowData[0]);
$("#txtSName").val(rowData[1]);
$("#txtSPosition").val(rowData[2]);
$("#txtSFacebook").val(rowData[4]);
$("#txtSTwitter").val(rowData[5]);
$("#txtSGoogleplus").val(rowData[6]);
});
});
</script>
最佳答案
放置一个空的 img 元素并在运行时从表行数据中复制值。 使用以下代码片段作为引用。
$(document).ready(function() {
});
function copyImage() {
alert($("#imgS").find("img").attr("src"));
$(".down img").attr("src", $("#imgS").find("img").attr("src"));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="down">
<img src="" />
</div>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>
<a href="#" id="imgS"><img width="100px" src="https://vignette.wikia.nocookie.net/universeconquest/images/e/e6/Sample.jpg/revision/latest?cb=20171003194302"></a>
</td>
<td>55577855</td>
</tr>
</table>
<button onClick="copyImage()"> Copy Image </button>
</body>关于javascript - 如何将选定的 HTML 表格行值显示到 div 中以用于图像目的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53986854/