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

Question

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

Answer 1

很难说上面的代码与你的问题有什么关系。

如果我看看你的 jsFiddle 示例，我可以大大简化任务。

首先我想缓存表本身。然后我将一个 click 事件处理程序绑定到表中的按钮元素（我假设这些是静态的，并且没有通过 Ajax 或其他方式将其他行添加到源表中）：

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

您可以在此示例中看到，我们正在获取单击按钮所在的行，对其进行克隆，然后删除上面所有之前的行。

如果您想删除包含单击按钮的行及其前任，您可以使用以下行：

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

我现在可以按如下方式附加该目标行：

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

这是否解决了您的问题，还是您正在尝试做更多的事情？

Answer 2

你应该可以使用下面的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

编辑

根据您的 cmets 添加编辑和删除按钮：

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

Answer 3

这是my solution：

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