Question

我有这个代码，其中一个表是从一个数组（myList）创建的，你可以删除一个特定的行，表将使用新的列表重建自己。这在我的计算机上第一次运行正常（但不在代码段上），但是当你再试一次时，它只是不起作用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

PS：这是代码的简化示例，我真的需要在我的情况下重建整个表，所以只是隐藏行不起作用。

谢谢！

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

除此之外，为什么每次都要重新创建表格？您只能删除点击的行。

＆＃13;

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

＆＃13;

<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>

＆＃13;

（JQuery）修改数组

1 个答案: