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 に答える