如何使用 jquery 从表 td 列复制文本/数字以从另一个 td 列输入值？

Posted 2023-03-05

【中文标题】如何使用 jquery 从表 td 列复制文本/数字以从另一个 td 列输入值？

【英文标题】：How can i copy text/numbers from table td column to input value from another td column with jquery?

【发布时间】：2022-01-08 03:11:59

【问题描述】：

当我单击“复制”按钮时，必须将右侧绿色列中的数字复制到相应/相关行的输入中的值。行和输入 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>

【问题讨论】：

相关行是哪一行？

@zetawars 好问题，我认为所有行都需要复制，因为只有一个按钮，并且 OP 声明“来自的数字”（暗示不止一个）

【参考方案1】：

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

【讨论】：

成功了，非常感谢！！！