javascript - 如何将选定的 HTML 表格行值显示到 div 中以用于图像
问题描述
朋友们,希望一切都好。实际上,我面临这个问题。我们可以将 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 元素并在运行时从 Table 行数据中复制该值。使用下面的代码片段作为参考。
$(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>
推荐阅读
- c++ - 结构体的重载函数向量的实例
- java - QueryDSL 如何创建带有自己连接的子查询?
- python-3.x - 如何创建日期字典作为键值对作为python中三个温度的列表
- php - 通过 FPDI 类将单元格添加到现有 PDF
- reactjs - 调用 setValue 时触发组件内部定义的 onChange
- android - Android 中的 autofill_compat_mode_allowed_packages 如何预填充以及如何将我自己的应用添加到列表中
- python - OrderedSet() 是否还有 O(1) 的搜索参数?
- python - 将谷歌 Colab 在临时位置下载的文件转储到谷歌驱动器
- javascript - 在函数的嵌套循环中修改数组
- r - 为多列 R 结转 NA 值