突出显示几个带有标头的表格单元格

Question

我想高亮显示当老鼠在那个细胞上使用药物的时候。我真的很想做。1.当鼠标药物放在桌子上的细胞上时，用边框突出显示。2.突出显示哪些单元格，该单元格的标头也被突出显示。我该怎么做？谢谢

<script type="text/javascript">
     $(window).load(function() {
     $(function () {
         $("#Mytable td")
             .mousedown(rangeMouseDown)
             .mouseup(rangeMouseUp)
             .mousemove(rangeMouseMove);
     });

     var dragStart = 0;
     var dragEnd = 0;
     var isDragging = false;

     function rangeMouseDown(e) {
         if (isRightClick(e)) {
             return false;
         } else {
             var allCells = $("#Mytable td");
             dragStart = allCells.index($(this));
             isDragging = true;

             if (typeof e.preventDefault != 'undefined') { e.preventDefault(); }
             document.documentElement.onselectstart = function () { return false; };
         }
     }

     function rangeMouseUp(e) {
         if (isRightClick(e)) {
             return false;
         } else {
             var allCells = $("#Mytable td");
             dragEnd = allCells.index($(this));

             isDragging = false;
             if (dragEnd != 0) {
                 selectRange();
             }

             document.documentElement.onselectstart = function () { return true; };
         }
     }

     function rangeMouseMove(e) {
         if (isDragging) {
             var allCells = $("#Mytable td");
             dragEnd = allCells.index($(this));
             selectRange();
         }
     }

     function selectRange() {
         $("#Mytable td").removeClass('selected');
         if (dragEnd + 1 < dragStart) { // reverse select
             $("#Mytable td").slice(dragEnd, dragStart + 1).addClass('highlighte');
         } else {
             $("#Mytable td").slice(dragStart, dragEnd + 1).addClass('highlighte');
         }
     }

     function isRightClick(e) {
         if (e.which) {
             return (e.which == 3);
         } else if (e.button) {
             return (e.button == 2);
         }
         return false;
     }
     });
 </script>

Answer 1

似乎您已经有了要求#1在代码中正常工作，为了突出显示标题，您可以将其添加到selectRange()函数中，以获取选定单元格的索引，并将类添加到相应的标头中：

function selectRange() {
    $("#Mytable td").removeClass('selected');
    if (dragEnd + 1 < dragStart) { // reverse select
       var tds = $("#Mytable td").slice(dragEnd, dragStart + 1).addClass('highlighted');
    } else {
       var tds = $("#Mytable td").slice(dragStart, dragEnd + 1).addClass('highlighted');
    }
    tds.each(function(){
        $('#Mytable th').eq($(this).index()).addClass('highlighted');
    });    
 }

演示小提琴