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');
    });    
 }

<强> Demo fiddle

使用标题突出显示多个表格单元格

1 个答案: