Javascript JQuery表单元格选择脚本

我是一名学生，不熟悉编程，希望通过尝试学习Javascript。我正在做一个练习，要求我在鼠标拖动时突出显示表格单元格。我让它工作，但我有问题，找出如何突出显示任何方向（不只是从X到Y方向）的细胞。下面的代码显示了它是如何从X方向到Y方向工作的；当用户将鼠标从Y方向拖动到X方向时，我希望它也这样做。 例如，考虑<代码> a、b、c、d、g、h < /c>和<代码> i <代码>作为表格单元格。

A B C 
D E F 
G H I 

将鼠标沿对角线从A拖动到E可选择单元格

A、B、D和E

。我想我，H，F，E被选中鼠标拖动从I到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>

$（函数（）{
var isMouseDown=false，
石灯；
var mouseDownRowX=0；
var mouseDownRowY=0；
$（“#化验表2 td.dragShadow”）
。单击（函数（）{
$（“#分析平台2 td”）。每个（功能）{
var currClass=$（this.attr（'class'）；
如果（currClass=='dragShadow'）{
$（this.css（'backgroundColor'，'none'）；
}
});
var currClass=$（this.attr（'class'）；
如果（currClass=='dragShadow'）{
$（this.css（'backgroundColor'，'#dff0de'）；
}
currRow=$（this.parent（）.parent（）.children（）.index（$（this.parent（））；
})
.mousedown（函数（）{
isMouseDown=真；
mouseDownRowX=$（this.parent（）.parent（）.children（）.index（$（this.parent（））；
mouseDownRowY=$（this）.parent（）.children（）.index（$（this））；
返回false；//防止文本选择
})
.mouseover（函数（）{
//警报（“鼠标悬停”+isMouseDown）；
如果（isMouseDown）{
currRow=$（this.parent（）.parent（）.children（）.index（$（this.parent（））；
currCol=$（this.parent（）.children（）.index（$（this））；
//var currRow=1；
//var currCol=1；
$（“#分析平台2 td”）。每个（功能）{
_mouseDownRowX=$（this.parent（）.parent（）.children（）.index（$（this.parent（））；
_mouseDownRowY=$（this）.parent（）.children（）.index（$（this））；
如果（\u mouseDownRowX>=
mouseDownRowX&&&&u mouseDownRowX=mouseDownRowY&&u mouseDownRowY为了在选择日历单元格时更方便用户，我推荐这一个插件。一个用于文档元素高亮度照明的非常简单和小的插件
为了在选择日历单元格时更方便用户，我推荐这一个插件。一个用于文档元素的非常简单和小的插件新界高亮度照明

         <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>