无法使用 jquery 解决类型错误

Question

I'm pretty sure this is nothing but as I'm new with coding I'm struggling with this problem. I'm trying to make my table navigable with arrows but when I use an arrow it just doesn't work. It seems to be because of a TypeError but I can't succeed to understand what's going wrong. If anyone could explain that would be great !

jsFiddle

Problem seems to come from line 60. This problem started with the fact I was using DataTable script. I then had these lines at the beginning of the js file:

// DataTable //
var table = $('#mytable').DataTable( {
    "paging": false,
    "searching": false,
    "info": false,
    fixedHeader: true,
    colReorder: true,
    stateSave: true,
});

But I wanted to remove that script to not depend about anything else (I'm learning by trying to do everything myself). So I tried to replace it with some vars, but unsuccessfully so far. My highlight function looked like this with DataTable:

        function highlight() { 
        document.querySelectorAll('.highlight-rc').forEach(col => col.classList.remove('highlight-rc'));            
        var colIdx = table.cell(c).index().column;
        $(table.cells().nodes()).removeClass('highlight-rc');
        $(table.column(colIdx).nodes()).addClass('highlight-rc');
        currCell.removeClass('highlight');
        c.addClass('highlight');  
        currCell.parent().removeClass('highlight-rc');
        c.parent().addClass('highlight-rc'); 
    }

Thanks in advance for your kind help. Sincerely,

Answer 1

Thanks to Rory help, I've been able to rethink my function and make it work. I'm posting it here if it can help anyone with the same troubles:

// Navigate with arrows //
var currCell = $('td').first();
var editing = false;

// User clicks on a cell //
$('td').click(function() {
    currCell = $(this);
    // edit(); //
}); 

// User navigates table using keyboard //
$('#mytable tbody').keydown(function(e) {
    var c = "";
    // Function to make highlight follow the navigation //
    function highlight() {
        document.querySelectorAll('.highlight-rc').forEach(col => col.classList.remove('highlight-rc'));
        currCell.removeClass('highlight');
        var navIndex = $(c).index();
        const columns = document.querySelectorAll(`td:nth-child(${navIndex+1})`);
        columns.forEach(col => {
            col.classList.add('highlight-rc');
        c.addClass('highlight');  
        c.parent().addClass('highlight-rc'); 
        })
    }