将表数据输入值克隆到整行 onclick 按钮

Question

下表我想将第一行的输入值更改为value="1" onclick 复制按钮。

当我手动输入时此value="1" ，当我单击复制按钮时，该值应重复到整行。

注意：我找不到任何关于此的脚本来添加尝试过的代码。

请在下面发表评论以进一步澄清。

 <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> <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>

Answer 1

你可以这样做：

$('.table a.btn').click(function() {
  var inputVal = $(this).prev().val();
  var td = $(this).closest("td");
  var sib = td.siblings().find("input");
  sib.val(inputVal)
});

这将从与link/button关联的input中获取值，并将该值放入同一tr上的其他input中

演示

 $('.table a.btn').click(function() { var inputVal = $(this).prev().val(); var td = $(this).closest("td"); var sib = td.siblings().find("input"); sib.val(inputVal) });

 <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> <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>

Answer 2

将此第一个值复制到 rest：

 $(function() { $(".btn-success").on("click", function(e) { e.preventDefault(); // stop the link var $inputs = $(this).closest("tr").find("input"); var val = $inputs.eq(0).val(); // take the first $inputs.val(val); }) });

 <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> <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>

Answer 3

此 JS 代码可能会有所帮助。

 jQuery(document).ready(function($) { jQuery('.table a.btn').click(function(event) { event.preventDefault(); var fieldVal = jQuery(this).siblings('.form-control').val(); jQuery(this).parent('td').siblings('td').children('.form-control').val(fieldVal); }); });

 <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> <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>

Answer 4

您可以在复制按钮的单击处理程序中使用prev()获取输入值。 使用最近查找父 td，然后获取其所有兄弟 td。 在同级 tds 和 append 中找到输入的第一个输入值到输入现有值

 $(document).ready(function(){ $('a.btn.btn-success').on('click', function(){ var val = $(this).prev('input').val(); var $td = $(this).closest('td'); var $siblings = $td.siblings(); //to append values /*$siblings.find('input.form-control').each(function(){ $(this).val($(this).val() + val); });*/ // to replace values $siblings.find('input.form-control').val(val); }); });

 <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> <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>

Answer 5

为了回答“是否可以将按钮放在外面？”的问题：

这是一个在所有输入字段前面都有按钮的版本：

从按钮本身 ( this ) 开始，您查找最近的td类型的父容器，然后找到它的所有兄弟姐妹和它们的input类型的子容器。 结果是 jquery object 具有一个表行的所有输入。 然后将值从第一个（ flds.eq(0) ）复制到所有的 rest （ flds.slice(1) ）。

 $('.table a.btn').click(function() { var flds = $(this).closest('td').siblings().find('input'); flds.slice(1).val(flds.eq(0).val()); });

 <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></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> <a href="#" class="btn btn-success btn-sm mt-1">Copy</a> </td><td> <input type="text" class="form-control" value="1"> </td><td> <input type="text" class="form-control" value="11"> </td><td> <input type="text" class="form-control" value="11"> </td></tr><tr><td> <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><td> <input type="text" class="form-control" value="2"> </td></tr><tr><td> <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><td> <input type="text" class="form-control" value="3"> </td></tr></tbody></table>