1

The below table I want to change the input value for first row become value="1" onclick the copy button.

This value="1" when I entered manually and the value should repeat to the entire row when I click the copy button.

Note: I couldn't found any script regarding this to add the tried code.

Kindly comment below for further clarification.

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>

Improve this question
7
  • Where is the script you tried? Commented Sep 19, 2019 at 9:41
  • Look for $(this).closest("tr").find("input").each(...) Commented Sep 19, 2019 at 9:43
  • @mplungjan I am not tried any script so far. Is it possible to do that. Commented Sep 19, 2019 at 9:45
  • I just gave you the start. Try it out Commented Sep 19, 2019 at 9:45
  • I don't know how to setup code from your syntax Commented Sep 19, 2019 at 9:45

5 Answers 5

Reset to default
2

Copy this first value to the 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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I think he wants the value to be changed to 1 (if 1 was the keyed in value), not add 1 to it like a string.
I think you got the wrong guy, it was someone else asking that question.
2

You could do it like this:

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

This will take the value from the input associated with the link/button and put that value into the other input's on the same tr

Demo

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

Improve this answer

3 Comments

Wow, this is nice!
Is it possible to place the button outside?
Well, yes, but you must find a way to find the associated input fields (either by class names or IDs).
1

You get the value of input using prev() inside click handler of the copy button. Find parent td using closest and then get all its sibling tds. find input inside sibling tds and append first input value to the input existing values

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

Improve this answer

Comments

1

This JS code could be helpful.

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>

Improve this answer

Comments

0

In order to answer the question "Is it possible to place the button outside?":

Here is a version with the button in front of all the input fields:

Starting from the button itself (this) you look for the closest parent container of type td, then find all its siblings and their children of type input. The result is a jquery object with all the inputs of one table row. Then do the copying of values from the first (flds.eq(0)) to the rest of them all (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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.