How pass row to other table with only jquery?

Question

I am learning JavaScript, and I want pass row from table to other table like this:

Pass rows from table to other table without repeat the same row.. How do i?

I have this:

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  $("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");

  $(".btn_remove").click(function() {
    $(this).parent().parent().remove();
  });

});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

score 2 · Accepted Answer · edited May 23 '17 at 12:00

You basically need to create a pseudo-class to identify the rows by their product id. In my example, I just named it e.g. "copy_1". You can then check if the ID already exists in the 2nd table. I also added, that the input field will be increased to add one product. If you don't want this, just remove the else-statement.

Side note: With the "on"-method, you can declare a global listener, which also applies on dynamically generated elements. You can use it for the remove button as well and don't need to redeclare it everytime, when someone adds a product. I change this in my code as well. See this post for more information about it: Jquery adding event listeners to dynamically added elements

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  // check if the row already exists in the 2nd table
  // if no, add the line to the 2nd table
  // if yes, add one product to the input field
  if($("#second_table .copy_"+column1).length == 0)
  {

    $("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
  }
  else
  {
     var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1;
     $("#second_table .copy_"+column1+" input").val(value);
  }
});

$("body").on("click",".btn_remove", function() {
    $(this).parent().parent().remove();
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

score 0 · Answer 2 · answered Aug 31 '16 at 02:39

It looks like you are just missing an event handler for the input event in the second table. You'l want to use event delegation since the content is added dynamically.

The following code should do the trick:

$("#second_table").on("input", "input", function() {
  var input = $(this);
  var columns = input.closest("tr").children();
  var price = columns.eq(3).text();
  var calculated = input.val() * price;
  columns.eq(5).text(calculated);
});

There's a running snippet below. You'll see the price calculate in real-time as you change the inputs in the second table.

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  $("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");

  $(".btn_remove").click(function() {
    $(this).parent().parent().remove();
  });

});

$("#second_table").on("input", "input", function() {
  var input = $(this);
  var columns = input.closest("tr").children();
  var price = columns.eq(3).text();
  var calculated = input.val() * price;
  columns.eq(5).text(calculated);
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Nice answer, but it's not the answer of the question. OP wants to know how to avoid multiple rows of the same product in the 2nd table. — Michael Walter, Aug 31 '16 at 05:20
@MichaelWalter I guess I misunderstood. +1 for your answer though — Dave, Sep 01 '16 at 05:34

How pass row to other table with only jquery?

2 Answers2