JQuery表單元格選擇腳本

我是一名學生，剛接觸編程，想通過嘗試學習來學習Javascript。我正在做一個練習，要求我在鼠標拖動時突出顯示錶格單元格。我得到它的工作，但我有問題找出如何通過拖動任何方向（而不僅僅是從X到Y方向）來突出顯示單元格。下面的代碼顯示了它如何從X到Y方向工作;我希望它在用戶將鼠標從Y方向拖動到X方向時執行相同操作。例如，考慮A, B, C, D, G, H和I作爲表格單元格。JQuery表單元格選擇腳本

A B C 
D E F 
G H I

從A至E拖動沿着對角線鼠標選擇細胞A,B,D & E。我想我，H，F，E要在拖動鼠標選擇從我到E.

這裏是工作代碼：

$(function() { 
var isMouseDown = false, 
isHighlighted; 
var mouseDownRowX = 0; 
var mouseDownRowY = 0; 

    $("#assayPlateTable2 td.dragShadow") 
    .click(function() { 
    $("#assayPlateTable2 td").each(function() { 
     var currClass = $(this).attr('class'); 
     if(currClass == 'dragShadow') { 
      $(this).css('backgroundColor', 'none'); 
     } 

    }); 
    var currClass = $(this).attr('class'); 
    if(currClass == 'dragShadow') { 
     $(this).css('backgroundColor', '#dff0de'); 
    } 

    currRow = $(this).parent().parent().children().index($(this).parent()); 
    }) 
    .mousedown(function() { 
    isMouseDown = true; 

    mouseDownRowX = $(this).parent().parent().children().index($(this).parent()); 
    mouseDownRowY = $(this).parent().children().index($(this)); 

    return false; // prevent text selection 
    }) 
    .mouseover(function() { 
    //alert('mouse over' + isMouseDown); 
    if (isMouseDown) { 
    currRow = $(this).parent().parent().children().index($(this).parent()); 
    currCol = $(this).parent().children().index($(this)); 

    //var currRow = 1; 
    //var currCol = 1; 
    $("#assayPlateTable2 td").each(function() { 
_mouseDownRowX = $(this).parent().parent().children().index($(this).parent()); 
_mouseDownRowY = $(this).parent().children().index($(this)); 
if(_mouseDownRowX >= 
    mouseDownRowX && _mouseDownRowX <= currRow && _mouseDownRowY 
       >= mouseDownRowY && _mouseDownRowY <= currCol) { 
      var currClass = $(this).attr('class'); 
      if(currClass == 'dragShadow') { 
       $(this).css('backgroundColor', '#dff0de'); 
      } 
       //alert("setting==>" + currRow + "," + currCol); 
     } else { 
      var currClass = $(this).attr('class'); 
      if(currClass == 'dragShadow') { 
       $(this).css('backgroundColor', 'none'); 
      } 
     } 
    }); 
    for(var i = mouseDownRowX; i < _mouseDownRowX; i++) { 
for(var j = mouseDownRowY; j < _mouseDownRowY; j++) { 

} 
    } 
    //$(this).parent().toggleClass("highlighted", isHighlighted); 
    //$(this).parent().css('backgroundColor', '#dff0de'); 
    } 
    }) 
    .bind("selectstart", function() { 
    return false; 
    }) 

$(document) 
.mouseup(function() { 
    isMouseDown = false; 
    }); 
}); 

</script>

HTML：

  <table cellpadding="0" cellspacing="0" id="assayPlateTable2"> 
      <tr> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 

      </tr> 
      <tr> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
       <td class="dragShadow">&nbsp;</td> 
      </tr> 
        <tr>...</tr> and so on 
     </table>

來源

2012-03-09 Deepa Thalikar

對用戶更友好在選擇日曆單元格時，我推薦這一個eHighLight插件。文檔元素高亮照明的非常簡單和小巧的插件

來源

2013-02-15 13:24:36 Ner

JQuery表單元格選擇腳本

回答

相關問題