Question

朋友，我希望一切都好。实际上，我面对这个问题。我们可以在文本框中显示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>

Answer 1

放置一个空的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>

如何将选定的HTML表行值显示为div以用于图像

1 个答案: