（jQuery）修改数组

Question

我有这样的代码，其中一个表是由一个数组（myList）构成的，您可以删除一个特定的行，并且该表将使用新列表重新构建自己。这在我的计算机上第一次正常工作（但不在代码片段中），但是当您再次尝试时，它不起作用。

$(document).ready(function() { 
 
    createTable(myList, myList.length); 
 
}); 
 

 
$('.btn').click(function(){ 
 
    var rowOn = $(this).closest("tr").index(); 
 
\t myList.splice(rowOn, 1); 
 
\t createTable(myList, myList.length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table> 
 

 
<script> 
 
var myList = ["a", "b", "c", "d", "e"]; 
 
createTable = function(list, nb){ 
 
    $('#myTab > tbody > tr').remove(); 
 
    for (var i = 0; i < nb; i++) { 
 
    var str = '<td><button class="btn">Delete</button></td>'; 
 
    $('#myTab > tbody').append('<tr>'+str+'<td>'+list[i]+'</td></tr>'); 
 
    } 
 
}; 
 
</script>

PS：这是代码的简化样本，我真的需要重建整个表在我的情况所以只是hidding行是行不通的。

谢谢！

Answer 1

您需要创建动态事件委派，因为您重新创建按钮，因此在重新创建表时，您的监听器会丢失。

$('table').on('click', '.btn', function() { /* ... */ }); 

var myList = ["a", "b", "c", "d", "e"]; 
 

 
function createTable(list, nb){ 
 
    $('#myTab > tbody > tr').remove(); 
 

 
    for (var i = 0; i < nb; i++) { 
 
     var str = '<td><button class="btn">Delete</button></td>'; 
 
     $('#myTab > tbody').append('<tr>'+str+'<td>'+list[i]+'</td></tr>'); 
 
    } 
 
}; 
 

 
$(function() { 
 
    createTable(myList, myList.length); 
 
}); 
 

 
$('table').on('click', '.btn', function() { 
 
    var rowOn = $(this).closest("tr").index(); 
 
    myList.splice(rowOn, 1); 
 
    createTable(myList, myList.length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

在这旁边，你为什么要每次都重新创建表？您只能删除点击的行。

var myList = ["a", "b", "c", "d", "e"]; 
 

 
$(function() { 
 
    $('#myTab > tbody > tr').remove(); 
 

 
    for (var i = 0; i < myList.length; i++) { 
 
     var str = '<td><button class="btn">Delete</button></td>'; 
 
     $('#myTab > tbody').append('<tr>'+str+'<td>'+myList[i]+'</td></tr>'); 
 
    } 
 
}); 
 

 
$('table').on('click', '.btn', function() { 
 
    var row = $(this).closest("tr"); 
 
    myList.splice(row.index(), 1); 
 
    row.remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>