jQuery DataTables：数组按索引删选中项仅移除首个元素问题

嘿，我明白你遇到的麻烦了——表格里的选中行能删掉，但数组里总是只删第一个元素，对吧？这问题主要出在两个地方：选中行索引的获取方式和splice的使用逻辑，我来给你一步步捋清楚并修复：

问题根源分析 #

1. 索引获取错误：你用row.prop('rowIndex')的时候，jQuery集合只会返回第一个选中行的DOM索引，而不是所有选中行的索引。而且更关键的是，DataTable的DOM行索引和你数据源数组invoiceItems的索引不一定对应（比如排序、分页后，DOM顺序和原始数组顺序会脱节）。
2. splice使用不当：你写的invoiceItems.splice(rowIndex)没有传第二个参数，默认会从该索引开始删除到数组末尾，而不是只删除当前元素；另外就算拿到多个索引，正序删除会因为数组长度变化导致后续索引偏移，删错元素。

修复后的代码 #

$('#deleteInvoiceItems').on('click', function() {
    // 获取DataTable实例中选中行对应的数据源数组索引
    var selectedRowIndexes = itemsTable.rows('.selected').indexes();
    
    // 倒序遍历索引，避免splice改变数组长度后索引混乱
    selectedRowIndexes.toArray().reverse().forEach(function(index) {
        // splice第二个参数传1，表示只删除当前索引的1个元素
        invoiceItems.splice(index, 1);
    });
    
    // 删除表格中的选中行并重新绘制
    itemsTable.rows('.selected').remove().draw();
    calcInvoiceTotals();
});

关键细节说明 #

• 用DataTable自身的索引：itemsTable.rows('.selected').indexes()会直接返回选中行在数据源数组invoiceItems中的真实索引，完全不受排序、分页的影响，这才是你需要的正确索引。
• 倒序删除：把选中的索引数组倒过来遍历，先删后面的元素，这样前面的元素索引不会因为数组长度变化而改变，避免漏删或误删。
• 正确使用splice：splice(index, 1)明确指定只删除当前索引的一个元素，而不是删到数组末尾。

这样修改后，就能同步删除表格中所有选中行和数据源数组里对应的元素啦！

内容的提问来源于stack exchange，提问作者nick.cook