jquery - 将表格行复制到另一个表格html

Fiddle

我有一个表，如果单击给定的行，该行将被复制到另一个表，并且上面的行将被隐藏。因此，例如，如果单击第126行，它将隐藏第0到125行。但是，它没有将目标行复制到另一个表。怎么了

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"));
}

最佳答案

您应该能够使用以下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

编辑

根据您的评论以及添加的编辑和删除按钮：

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