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

时间：2019-09-19 09:39:57

标签： javascript jquery html css

我要更改第一行输入值的下表在单击复制按钮后变为value="1"。

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

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

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

Announcing Twilio’s HTTP Callbacks (webhooks) Connection Overrides for Voice 

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

5 个答案:

答案 0 :(得分：2)

您可以这样做：

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

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

演示 

$('.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>

答案 1 :(得分：2)

将此第一个值复制到其余值：

obsErr$.pipe(intercept)
  .subscribe(v => console.log('i1', v))

obsErr$.pipe(intercept2)
  .subscribe(v => console.log('i2', v))

$(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); 
  })
});

答案 2 :(得分：1)

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

答案 3 :(得分：1)

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

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

答案 4 :(得分：0)

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

以下是所有输入字段前面都有按钮的版本：

从按钮本身（this开始，您将寻找类型为td的最近的父容器，然后查找其所有同级及其input类型的子代。结果是一个jquery对象，其中一个表行的所有输入。然后将值从第一个（flds.eq(0)）复制到其余所有（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>

相关问题
最新问题