Скрипт выбора ячейки таблицы JQuery - PullRequest
Новая
       23

Скрипт выбора ячейки таблицы JQuery

1 голос
/ 09 марта 2012

Я студент, новичок в программировании и хочу изучать Javascript, пробуя что-то. Я делаю упражнение, которое требует от меня выделения ячеек таблицы при перетаскивании мышью. Я заставил это работать, но у меня есть проблемы с выяснением, как выделить клетки, перетаскивая любое направление (не только от направления X к Y). Код ниже показывает, как это работает от направления X к Y; Я хочу, чтобы он делал то же самое, когда пользователь перетаскивает мышь в направлении Y к X. Например, рассмотрим A, B, C, D, G, H и I как ячейки таблицы. 

A B C 
D E F 
G H I

Перетаскивание мыши по диагонали от А до Е выделяет ячейки 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>

1 Ответ

1 голос
/ 15 февраля 2013

Для более удобного выбора ячеек календаря, я рекомендую этот eHighLight Плагин. Очень простой и крошечный плагин для подсветки элементов документа

...