JQuery突出显示表中的行和列

Question

I want to add to my site table with highlighting row and column, but I have troubles with column highlighting. This is my table. This is online courses and a full the table with names such as Homework1, HW2 and etc.

 %if len(students) > 0: <div class="grades"> <table class="grade-table"> <% templateSummary = students[0]['grade_summary'] %> <thead> <tr class = "table-header"> <!— Header Row —> %for section in templateSummary['section_breakdown']: //...... <th title="${tooltip_str}"><div class="assignment-label">${section['label']}</div></th> %endfor <th title="${_('Total')}"><div class="assignment-label">${_('Total')}</div></th> </tr> </thead> <%def name="percent_data(fraction, label)"> //.... <td class="${data_class}" data-percent="${fraction}" title="${label}">${ "{0:.0f}".format( 100 * fraction ) }</td> </%def> <tbody> %for student in students: <tr class="table-row"> %for section in student['grade_summary']['section_breakdown']: ${percent_data( section['percent'], section['detail'] )} %endfor ${percent_data( student['grade_summary']['percent'], _('Total'))} </tr> %endfor </tbody> </table>

This is JQuery. So in highlightRow() is making the magic with row, but I don't understand, to add highlightColumn() and "$element.find('tr').bind('mouseover', highlightColumn);" or to add in the function highlightRow() code for column.

 var Gradebook = function($element) { "use strict"; var $body = $('body'); var $grades = $element.find('.grades'); var $studentTable = $element.find('.student-table'); var $gradeTable = $element.find('.grade-table'); var $search = $element.find('.student-search-field'); var $leftShadow = $('<div class="left-shadow"></div>'); var $rightShadow = $('<div class="right-shadow"></div>'); var tableHeight = $gradeTable.height(); var maxScroll = $gradeTable.width() - $grades.width(); var mouseOrigin; var tableOrigin; var startDrag = function(e) { mouseOrigin = e.pageX; tableOrigin = $gradeTable.position().left; $body.addClass('no-select'); $body.bind('mousemove', onDragTable); $body.bind('mouseup', stopDrag); }; var highlightRow = function() { $element.find('.highlight').removeClass('highlight'); var index = $(this).index(); $studentTable.find('tr').eq(index + 1).addClass('highlight'); $gradeTable.find('tr').eq(index + 1).addClass('highlight'); }; $leftShadow.css('height', tableHeight + 'px'); $grades.append($leftShadow).append($rightShadow); setShadows(0); $grades.css('height', tableHeight); $gradeTable.bind('mousedown', startDrag); $element.find('tr').bind('mouseover', highlightRow); $search.bind('keyup', filter); $(window).bind('resize', onResizeTable); };

Answer 1

It should be something like this:

$element.find('td').bind('mouseover', highlightColumn);

var highlightColumn = function() {
     //remove all highlights
     //not sure if it should be here may be it should happen before both highlightRow and highlightColumn function calls
     $element.find('.highlight').removeClass('highlight');

     var columnIndex = $(this).index(); //this should be td in this case

     $studentTable.find('tr td:eq(' + columnIndex + ')').addClass('highlight');
     $gradeTable.find('tr td:eq(' + columnIndex + ')').addClass('highlight');
};