如何使用jquery將表td列中的文本/數字復制到另一個td列中的輸入值？

當我單擊“復制”按鈕時，必須將右側綠色列中的數字復制到相應/相關行的輸入中的值。行和輸入 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>

uj5u.com熱心網友回復：

使用$("table tr").each回圈遍歷每一行然后.find()找到跨度和輸入，然后text()讀取跨度值和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>

標籤：查询 html-table

上一篇：將選定的單選按鈕ID從資料表發送到DjangoURL

下一篇：如果影片為0%和50%，如何在jquery中翻轉影像？