Клонировать входные данные таблицы для всей кнопки щелчка строки - PullRequest
Новая
       1

Клонировать входные данные таблицы для всей кнопки щелчка строки

1 голос
/ 19 сентября 2019

В приведенной ниже таблице я хочу изменить значение ввода для первой строки: value="1" нажать кнопку копирования.

Это value="1", когда я вводил вручную, и значение должно повторяться на всю строку, когда янажмите кнопку "Копировать".

Примечание: Я не смог найти ни одного скрипта, связанного с этим, чтобы добавить пробный код.

Пожалуйста, оставьте комментарий ниже для дальнейшего разъяснения.

explanation

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

2 голосов
/ 19 сентября 2019

Скопируйте это первое значение в остальные: 

$(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>
2 голосов
/ 19 сентября 2019

Вы можете сделать это следующим образом: 

$('.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 голос
/ 19 сентября 2019

Вы получаете значение ввода, используя prev() внутри обработчика щелчка кнопки копирования.Найти родительский тд с помощью ближайшего, а затем получить все его родные тдс.найти входные данные внутри сестринского 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>
1 голос
/ 19 сентября 2019

Этот код 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>
0 голосов
/ 19 сентября 2019

Чтобы ответить на вопрос «Можно ли разместить кнопку снаружи?»:

Вот версия с кнопкой перед всеми полями ввода:

Начиная сСама кнопка (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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...