Question

我是一名学生，非常喜欢编程，并希望通过尝试来学习Javascript。我正在做一个练习，要求我在鼠标拖动时突出显示表格单元格。我得到了它的工作，但我有问题如何通过拖动任何方向（不只是从X到Y方向）突出显示单元格。下面的代码显示了它从X到Y的工作方式;当用户将鼠标从Y方向拖动到X方向时，我希望它也能这样做。例如，将A, B, C, D, G, H和I视为表格单元格。

A B C 
D E F 
G H I

沿着对角线从A到E拖动鼠标选择单元格A,B,D & E。我希望在从I到E的鼠标拖动时选择I，H，F，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>

Answer 1

为了更方便用户选择日历单元格，我推荐这个eHighLight插件。一个非常简单的小文件元素高照明插件

JQuery表格单元格选择脚本

1 个答案: