Question

我有一个表格，如果我点击一个给定的行，该行将被复制到另一个表格，上面的行将被隐藏。因此，例如，如果我单击第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

修改

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

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

将表行复制到另一个表html

3 个答案: