javascript - 添加和删​​除表中的行

Question

我需要帮助。当我单击绿色加号时，我想在表中添加一行。当我添加一个新区域并单击绿色加号时，我想向该区域的表中添加一行，但它不起作用。删除行也不起作用。你能帮我吗？

https://jsfiddle.net/agata666/hu1cvy5n/44/

   var TABLEELEVEN = $('.tableEleven');

$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

$('.table-remove').click(function () {
    $(this).parents('tr').detach();
    sumTotalPower()
});


var $foo = $(".tab-pane");
var hash = 1;
$(".add").on("click", function () {
    var $newPanel = $foo.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".panel").data('hash', hashClass).attr("href",  "#" + (++hash)).text("Zone " + hash);

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + hashClass + '" data-toggle="tab" contenteditable="true">Zone ' + hash + '</a></li>').appendTo('.tabs');



$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

});



var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');

function generateHash() {
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
}); 

Answer 1

我测试了你的代码。

您有重复的代码，这就是为什么当您单击绿色按钮时您会看到两行。删除其中之一

$('.table-add-eleven').click(function () {
var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
TABLEELEVEN.find('table').append($clone);
});

对于每个区域，您需要创建新的表实例。