如何在jQuery DataTables中通过fnFooterCallback新增第三行及以上页脚行

你遇到的报错由两个问题导致：

1. $(nRow).next() 方法仅会返回紧邻当前元素的下一个兄弟节点，返回的jQuery集合长度始终为1，不存在索引为1、2的元素，所以你取[1]得到的thirdRow是undefined，调用方法自然报错
2. 你代码中第四行的变量名拼写错误，forthRow应为fourthRow，也会导致后续运行报错

根据你的使用场景，可以选择两种实现方式：

场景1：操作已存在的后续页脚行 #

用nextAll()方法获取当前行之后所有的兄弟tr元素，再按索引取值即可：

// 先获取当前行之后所有的兄弟行
var nextRows = $(nRow).nextAll('tr');
// 按索引取对应行（索引从0开始）
var secondRow = nextRows[0]; 
var thirdRow = nextRows[1];
var fourthRow = nextRows[2]; 

// 分别获取各行单元格，不要重复声明同名变量避免覆盖
var secondCells = secondRow.getElementsByTagName('td');
var thirdCells = thirdRow.getElementsByTagName('td');
var fourthCells = fourthRow.getElementsByTagName('td');

场景2：动态新增第三、第四行 #

如果页脚原本只有两行，需要动态生成新行的话，直接往tfoot容器插入新行即可：

// 拿到当前页脚容器
var footer = $(nRow).closest('tfoot');
// 新增第三行并插入页脚
var thirdRow = $('<tr>').appendTo(footer)[0];
// 给第三行插入对应数量的单元格，数量和表格列数保持一致
$(thirdRow).append('<td>列1内容</td><td>列2内容</td><td>列3内容</td>');
// 按同样逻辑新增第四行
var fourthRow = $('<tr>').appendTo(footer)[0];

• 不要重复声明同名的nCells变量，后声明的会覆盖之前的取值，建议按行区分变量名
• 动态新增行时，单元格数量要和表格的列数保持一致，避免出现排版错位
• 初始化DataTables时需要配置footer: true，确保页脚元素正常渲染可操作

内容的提问来源于stack exchange，提问作者David Tucker