All geek questions in one place

How to get specific columns in a row and move them to another table

I would like to pass only a specific column. Please help me.

Here is my code:

btnAdd.on('click', function () { var trItem = $(this).closest("tr").clone(); trItem.find("input").remove(); trItem.add("<tr>").append("</tr>"); $("#products").append(trItem); console.log(btnAdd); })

Thank you very much.

+5
source share
1 answer

You need to indicate that all cells must be cloned.

The funcCloneRow function will clone the string (tr) and add the contents of the tdKeyArr cell. Remember that "tdKeyArr" is an array containing the selected cell position, for example:

 $(function() { var funcCloneRow = function($table1, $table2, trIndex, tdKeyArr) { // define. If tdKeyArr == undefinded, all the cell in choosen tr will be cloned if($table1 == undefined || $table2 == undefined || trIndex == undefined) { return; } // clone row var $tr = $table1.find('tr').eq(trIndex).clone(); // get cell content if(tdKeyArr != undefined) { $tr.children('td').text(''); for (var i = 0; i < tdKeyArr.length; i++) { $tr.children('td').eq(tdKeyArr[i]).html($table1.find('tr').eq(trIndex).children('td').eq(tdKeyArr[i]).html()); } } // append new row to second table if ($table2.children('tbody').length) { $table2.children('tbody').append($tr); } else { $table2.append($tr); } } $('table button').on('click', function(event) { funcCloneRow($('#table1'), $('#table2'), $(this).closest('tr').index(), [$(this).parent().index(), 1]); }); }); 
 table { float:left; margin-right:100px; border-collapse:collapse; text-align:center; vertical-align:top; } table th, table td { border:1px solid #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <body> <table id="table1"> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> <tr> <td>row 1</td> <td>row 1</td> <td><button>Append</button></td> </tr> <tr> <td>row 2</td> <td>row 2</td> <td><button>Append</button></td> </tr> <tr> <td>row 3</td> <td>row 3</td> <td><button>Append</button></td> </tr> </table> <table id="table2"> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> </table> </body>
0
source

Source: https://habr.com/ru/post/1269955/

More articles:


All Articles