我如何将 text/numbers 从 table td 列复制到另一个带有 jquery 的 td 列的输入值？

Question

当我单击“复制”按钮时，必须将右侧绿色列中的数字复制到 corresponding/related 行的输入值中。行和输入 ID 是动态的。我需要一个 jquery 函数来完成它，但我不知道该怎么做。我有数百行，但我只选择了 3 行。谢谢。

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>

Answer 1

使用$("table tr").each遍历每一行，然后.find()找到跨度和输入，然后text() to read the span value and val()设置输入值：

$("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>

我如何将 text/numbers 从 table td 列复制到另一个带有 jquery 的 td 列的输入值？

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

jquery

html-table