I need to pass the data from one row of a table to another

Question

I need to pass the data from one row of a table to another

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I know that in this group they are very capable to help, I need your help, my problem is the following, I want to take the data from a selected row of a table and send the data to another table, but I want a column is not sent to the second table, ....... How can I do it?

This script lists the products in a database.

function listSales () {var nom = $ ("#box"). val ();
$ .get ("CV", {"opc": 1}, function (data) {

    var x = JSON.parse(data);  

      $("#tabla tbody tr").remove();     
    for(var i = 0;i<x.length;i++){  $("#tablaventas").append("<tr class='fila' ><td>"+(i+1)+"</td<td id='1'>"+x[i].idPro+"</td><td id='2'>"+x[i].nombre+"</td><td id='3'>"+x[i].precio+"</td><td>"+x[i].stock+"</td><td id='cantidad'><input name='' type='text'></td><td id='accion'><input name='' type='checkbox'></td></tr>");}  
}); }

This is my table listing the products (table1)

# ID PRODUCT PRICE STOCK QUANTITY ACTION

This is the table in which I want the selected row of table 1 to send the data, but I do not want it to send the data of stock, but to send the data that it is entered in the input.
(table 2)

                        #
                        ID
                        PRODUCT
                        PRICE
                        QUANTITY
                        ACTION

javascript jquery html netbeans

asked by Gerson Saul Malca Bazan 23.05.2018 в 17:57

source

2 answers

Clear data from 2 MySQL tables How to receive remote notifications with Firebase

score 1 · Answer 1

Look, it's really simple really:

for:

<table id="table1" border="1">
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
            <td>data4</td>
        </tr>
    </tbody>
</table>
<br>
<table id="table2" border="1">

    <thead>
        <tr>
            <th>headerClone1</th>
            <th>headerClone2</th>
            <th>headerClone3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>clone1</td>
            <td>clone2</td>
            <td>clone3</td>
        </tr>
    </tbody>
</table>

This is enough:

    (function($){
        $(function(){
            var trClone = $('#table1 tr:eq(1)').clone();
            trClone.find('td:eq(2)').remove();
            trClone.appendTo('#table2 tbody');
        });
    })(jQuery)

What you do is clone the tr you want, then remove the column with index x, and finally add this tr cloned to the new table. the output is:

score 0 · Answer 2

I leave the link to the exercise of how to send data from one table to another and I explain briefly how it works:

In the first table I have fixed data that I will use to send the row to another table

<table id="tabla1" border="1" width="100%">
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    <td><input type="button" value="Eviar" class="envio"></td>
  </tr>
  <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
    <td><input type="button" value="Eviar" class="envio"></td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td><input type="button" value="Eviar" class="envio"></td>
  </tr>
</table>

The second table is empty:

<table id="tabla2" border="1" width="100%">
</table>

Inside the table1 there is a button that will serve for the interaction with the user and so you can pass the row to the table that is empty, for that we have the following code

$('.envio').on('click', function() {
    var hermano=$(this).parent();
    $("#tabla2").prepend("<tr>\
                                            <td>"+hermano.siblings("td:eq(0)").text()+"</td>\
                        <td>"+hermano.siblings("td:eq(1)").text()+"</td>\
                        <td>"+hermano.siblings("td:eq(2)").text()+"</td>\
                                        </tr>")
  });

When the button is pressed, what we will do is return a level with the function parent () to place us at the same level as the td, once there we will look for the brothers of this td, for example A1, A2, A3 (for this is the function siblings hermano.siblings ("td: eq (1)")) with the option eq we obtain each of the elements that we want to pass to table2 and obtain its text with the function text ().

Once we have all the data, we will send it to table2 with the function $ ("# table2"). prepend ()

I leave the link for you to see how it works link