How can i copy text/numbers from table td column to input value from another td column with jquery?-CodePudding

when i click the "Copy" button, the numbers from right green column must be copied to value from the input of the corresponding/related row. Row and input ids are dynamic. I need a jquery function to do it and i do not know how. I have hundreds of rows but i have chosen only 3 for example. Thanks.

function copyQty() {
    
}

.available-qty {
  background-color: green;
  padding: 4px;
  color: white;
  margin-left: 10px;
}

.copy-qty-btn {
  margin-bottom: 20px;
}

<table>
    <thead>
        <button class="btn copy-qty-btn" onclick="copyQty();">Copy</button>
    </thead>

    <tbody>
        <!-- row with dynamic id -->
        <tr id="row_dynamic_1">
            <td>
                <!-- input with dynamic id -->
                <input type="text" name="max_qty_dynamic_1" id="max_qty_dynamic_1" value="here must be 3 after click">
            </td>
            <td>
                <span class="available-qty">3</span>
            </td>
        </tr>
        <!-- row with dynamic id -->
        <tr id="row_dynamic_2">
            <td>
                <!-- input with dynamic id -->
                <input type="text" name="max_qty_dynamic_2" id="max_qty_dynamic_2" value="here must be 4 after click">
            </td>
            <td>
                <span class="available-qty">4</span>
            </td>
        </tr>
        <!-- row with dynamic id -->
        <tr id="row_dynamic_3">
            <td>
                <!-- input with dynamic id -->
                <input type="text" name="max_qty_dynamic_3" id="max_qty_dynamic_3" value="here must be 5 after click">
            </td>
            <td>
                <span class="available-qty">5</span>
            </td>
        </tr>

    </tbody>
</table>

CodePudding user response：

Use $("table tr").each to loop through each row then .find() to find the span and inputs, then text() to read the span value and val() to set the input value:

$("table tr").each((i,tr) => {
  var row = $(tr);
  var inp = row.find("input");
  var source = row.find(".available-qty");
  var qty = source.text();

  inp.val(qty);
});

$(".copy-qty-btn").click(copyQty);

function copyQty() {
  $("table tr").each((i, tr) => {
    $(tr).find("input").val($(tr).find(".available-qty").text())
  });
}

.available-qty {
  background-color: green;
  padding: 4px;
  color: white;
  margin-left: 10px;
}

.copy-qty-btn {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <button class="btn copy-qty-btn">Copy</button>
  </thead>

  <tbody>
    <!-- row with dynamic id -->
    <tr id="row_1">
      <td>
        <!-- input with dynamic id -->
        <input type="text" name="max_qty_dynamic_1" id="max_qty_dynamic_1" value="here must be 3 after click">
      </td>
      <td>
        <span class="available-qty">3</span>
      </td>
    </tr>
    <!-- row with dynamic id -->
    <tr id="row_2">
      <td>
        <!-- input with dynamic id -->
        <input type="text" name="max_qty_dynamic_2" id="max_qty_dynamic_2" value="here must be 4 after click">
      </td>
      <td>
        <span class="available-qty">4</span>
      </td>
    </tr>
    <!-- row with dynamic id -->
    <tr id="row_3">
      <td>
        <!-- input with dynamic id -->
        <input type="text" name="max_qty_dynamic_3" id="max_qty_dynamic_3" value="here must be 5 after click">
      </td>
      <td>
        <span class="available-qty">5</span>
      </td>
    </tr>

  </tbody>
</table>