0

当鼠标在该单元格上时，我想突出显示表格单元格。我真的很想做 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>
4

1 回答 1

0

似乎您的代码中已经有要求 #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');
    });    
 }

演示小提琴

于 2013-07-28T07:43:11.083 回答