CODEWITHSUNDEEP
jqueryhtmlhtml-tablerows
user3547883
user3547883

Reputation: 83

Copy table rows to another table html

Fiddle

I have a table where if I click on a given row that row will be copied to another table and the rows above will be hidden. So for example if I click the 126th row it will hide rows 0 through 125. However it is not copying that target row to the other table. What's going wrong?

var Startcheck = true; 
function SelectStartPoint(dataSet)
{

    if (Startcheck)
        var $test = $(dataSet).find('td').map(function() {
            return $(this).text();
        }).get().join("-");

    var data = $test.split('-');


    $("tr:lt(" + data[0] + ")").css("display", "none");
        var items = [];
        var newTr = $(this).closest("tr").clone();
        var newButtonHTML = 
        "<input type='button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>";

        $(newButtonHTML).children("button").click(function(e) {});

        $(newTr).children("td:last").html("").html(newButtonHTML);
        items.push(newTr);
        newTr.appendTo($("#stopsTable"));
}

Upvotes: 1

Views: 4428

Answers (3)

Pete
Pete

Reputation: 58422

You should be able to achieve your desired effect using the following jQuery:

var rows = $('#myTable tbody tr'),
    copyTable = $('#stopsTable tbody');

rows.click(function() {
    var row = $(this),
        cloneRow = row.clone(),
        thisIndex = rows.index(row);

    copyTable.append(cloneRow);

    rows.filter(function() {
        return rows.index($(this)) < thisIndex;
    }).hide();
});

Example

Example with use of Phil's prevAll

EDIT

As per your comments with added edit and delete buttons:

var rows = $('#myTable tbody tr'),
    copyTable = $('#stopsTable tbody');

rows.click(function() {
    var row = $(this),
        cloneRow = row.clone();

    cloneRow.children('td:last-child').html('<input type="submit" value="Edit" style="font-size: 12px; width: 100px;" class="edit"><input type="submit" value="Delete" style="font-size: 12px; width: 100px;" class="delete">');

    copyTable.append(cloneRow);

    row.prevAll().hide();
});

copyTable.on('click', '.edit', function(e) {
    e.preventDefault();
    alert('do edit function here');
});

copyTable.on('click', '.delete', function(e) {
    e.preventDefault();
    $(this).closest('tr').remove();
});

Example

Upvotes: 1

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

This is my solution:

$(function(){
  $('#myTable .addBtn').click(function(){ 
    var tr = $(this).parents('tr');
    $('#stopsTable tbody').append(tr.clone());
    tr.prevAll().hide();
  });
});

Upvotes: 1

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

It's a bit hard to tell how your code above relates to your problem.

If I look at your jsFiddle example, I can simplify the tasks quite a lot.

First I want to cache the table itself. Then I'll bind a click event handler to the button elements in your table (I'm assuming these are static and do not have additional rows being added to the source table via Ajax or something):

var table = $('#myTable');

$('input', table).click(function(e){
    var row = $(this).closest('tr').clone();
    $(this).closest('tr').prevAll().remove(); // remove all previous rows

    console.info(row.html());
});

You can see in this example that we're getting the row from which the button was clicked, cloning it and then removing all the previous rows above.

If you want to remove the row containing the clicked button as well as its predecessors, you'd use the following line:

$(this).closest('tr').prevAll().andSelf().remove();

I can now append that target row as follows:

$('myTargetTable tbody').append(row);

Does this solve your problem or is there more that you're trying to do?

Upvotes: 3

Related Questions