Tablo hücrelerini dikey ve yatay highlight etme işi

Merhaba arkadaşlar. Aşağıda yer alan kodları kullanarak sitemde tablo hücrelerinin üzerine fare imleciyle gelindiğinde dikey ve yatay highlight işlemi uyguluyorum. Tek bir sorun haricinde sorunsuz çalışıyor o da colspan ve rowspan bulunan hücreler.

Öncelikle ne istediğimi daha net anlatabilmek için videolu bir şekilde gösteriyorum:
https://youtu.be/6DO6hXiYgLE


Kullandığım kodlar:

// table highlight
$(document).ready(function () {
    // When hovering over a cell in any FixesTable
    $('.wikitable.item').each(function () {
        var currentTable = $(this);

        currentTable.find('td, th').hover(function () {
            // Get the index of the cell's column
            var columnIndex = $(this).index();

            // Exclude the first column (index 0)
            if (columnIndex > 0) {
                // Remove highlight from the previous column within the same table
                currentTable.find('td, th').filter(':nth-child(' + (columnIndex + 1) + ')').addClass('highlight-cell');
            }
        }, function () {
            // Remove highlight from all columns within the same table when not hovering
            currentTable.find('td, th').removeClass('highlight-cell');
        });
    });
});

.highlight-cell { background-color: var(--background-color-quiet--hover) }

İşlemi ücretli veya ücretsiz yapabilecek arkadaşlar ister konu altından ister özel mesajla iletişime geçebilirler.

Bunu dener misiniz?

$(document).ready(function () {
    $('.wikitable.item').each(function () {
        var currentTable = $(this);
        var cells = currentTable.find('td, th');

        cells.hover(function () {
            var $this = $(this);
            var columnIndex = $this.index();
            var rowIndex = $this.parent().index();

            $this.parent().find('td, th').addClass('highlight-cell');

            cells.filter(function() {
                return $(this).index() === columnIndex;
            }).addClass('highlight-cell');

            if ($this.attr('colspan')) {
                var colspan = parseInt($this.attr('colspan'));
                for (var i = 0; i < colspan; i++) {
                    cells.filter(function() {
                        return $(this).index() === columnIndex + i;
                    }).addClass('highlight-cell');
                }
            }

            if ($this.attr('rowspan')) {
                var rowspan = parseInt($this.attr('rowspan'));
                for (var i = 0; i < rowspan; i++) {
                    currentTable.find('tr').eq(rowIndex + i).find('td, th').addClass('highlight-cell');
                }
            }
        }, function () {
            cells.removeClass('highlight-cell');
        });
    });
});

.highlight-cell {
    background-color: var(--background-color-quiet--hover) !important;
}

Bunda şöyle bir durum oluyor hocam:

İlk örnekte fare imlecim HP Bonus'un +2 deki değerinin üzerinde olmasına karşın +1 sütununu ve +2 sütununun yalnızca bir üst ve bir altındaki hücrelerini seçiyor. Olması gereken ise +2 sütunundaki tüm hücreler ve HP Bonus satırındaki tüm hücrelerin seçilmesi. Tabi bu durumda +1 sütunundaki rowspan'a da denk geldiği için onu da seçmeli.

İkinci örnekte bulunduğu sütunu doğru seçiyor, ancak aynı zamanda rowspan'ın denk geldiği yataydaki tüm satırları da seçiyor. Olması gerekense örneğin fare Magic Bonus satırının hizasındaysa sadece Magic Bonus satırı ve +1 sütunu seçilmeli, benzer şekilde MP Bonus satırının hizasındaysam da o satırdaki hücreler seçilmeli. Oysa ki bu durumda rowspan'ın denk geldiği "tüm" satırları seçiyor.

Üçüncü örnekte de fare Ağırlık satırındaki hücrede. Ancak Ağırlık satırındaki hücre tüm değerlere denk geldiği için hepsini seçiyor. Olması gereken "fare hizasına" denk gelen sütunları seçmesi.

Biraz uzun uzadıya anlattım ama bilmiyorum yapmak istediğimi anlatabildim mi.