移除DataTable后jQuery出现TypeError，表格箭头导航失效求助

核心问题是你移除DataTables后，原highlight函数完全依赖DataTables专属API，这些API在普通DOM/jQuery对象上不存在，直接触发TypeError导致整个函数执行失败，箭头导航自然无效。

具体错误点（第60行） #

原来的table.cell(c).index().column是DataTables的专属方法，现在table只是普通的jQuery表格对象，没有.cell()方法，这就是报错的直接原因。

纯原生+jQuery替代实现 #

用原生JS或基础jQuery方法替代DataTables的API，以下是修改后的完整逻辑：

1. 替换原DataTables初始化代码：

// 替换DataTables实例，用普通jQuery对象获取表格
var table = $('#mytable');
// 初始化时手动设置第一个单元格为默认选中
var currCell = table.find('tr:first td:first')[0];
var c = currCell;
highlight();

2. 重写highlight函数（完全不依赖第三方库）：

function highlight() { 
    // 移除所有全局的highlight-rc类
    document.querySelectorAll('.highlight-rc').forEach(el => el.classList.remove('highlight-rc'));            
    
    // 获取当前单元格c的列索引（原生JS实现）
    var colIdx = Array.from(c.parentNode.children).indexOf(c);
    
    // 获取当前列的所有单元格（jQuery实现）
    var columnCells = table.find('tr').children(`td:nth-child(${colIdx + 1})`);
    
    // 给当前列的所有单元格添加列高亮
    columnCells.addClass('highlight-rc');
    
    // 切换单元格自身的高亮
    currCell.classList.remove('highlight');
    c.classList.add('highlight');  
    
    // 切换行的高亮
    currCell.parentElement.classList.remove('highlight-rc');
    c.parentElement.classList.add('highlight-rc'); 
}

3. 检查箭头导航逻辑
   确保箭头点击事件中正确获取下一个/上一个单元格，示例：

// 向右箭头导航示例
document.querySelector('.arrow-right').addEventListener('click', function() {
    var nextCell = c.nextElementSibling;
    if (nextCell) {
        currCell = c;
        c = nextCell;
        highlight();
    }
});

额外注意事项 #

• 确保c和currCell始终是有效的DOM元素，避免出现null/undefined导致的报错
• 如果表格有表头，通过选择器td而非th规避误操作表头单元格

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