点击Copy按钮将行内首个input值克隆至整行的实现需求

Got it, let's get this working for you! Since you already have jQuery loaded on your page, we can add a simple script to handle the copy functionality exactly as you need.

How It Works #

• We'll hook a click event to every "Copy" button
• When clicked, we first stop the default link behavior (since it's an <a href="#"> tag)
• We target the parent table row of the clicked button
• Grab the current value from the first input in that row (including any manual edits you've made)
• Set that value to all input elements within the same row

Full Working Code #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
  // Handle click on all Copy buttons
  $('.btn-success').on('click', function(e) {
    e.preventDefault(); // Stop the link from jumping to top
    
    // Get the table row containing the clicked button
    const targetRow = $(this).closest('tr');
    // Fetch the value from the first input in this row
    const copyValue = targetRow.find('input:first').val();
    // Apply this value to every input in the same row
    targetRow.find('input').val(copyValue);
  });
});
</script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control" value="1">
        <a href="#" class="btn btn-success btn-sm mt-1">Copy</a></td>
      <td>
        <input type="text" class="form-control" value="11">
      </td>
      <td>
        <input type="text" class="form-control" value="11">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control" value="2">
        <a href="#" class="btn btn-success btn-sm mt-1">Copy</a></td>
      <td>
        <input type="text" class="form-control" value="2">
      </td>
      <td>
        <input type="text" class="form-control" value="2">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control" value="3">
        <a href="#" class="btn btn-success btn-sm mt-1">Copy</a></td>
      <td>
        <input type="text" class="form-control" value="3">
      </td>
      <td>
        <input type="text" class="form-control" value="3">
      </td>
    </tr>
  </tbody>
</table>

Quick Notes #

• This works for any number of rows you add later (no need to update the script for new rows)
• It uses the current live value of the first input, not just the initial value attribute you set in the HTML
• The closest('tr') method ensures we only modify inputs in the exact row where you clicked "Copy"

内容的提问来源于stack exchange，提问作者Saravana