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表单元格选择脚本

回答

相关问题