CSS и HTML: пометить область таблицы с помощью мыши

Question

Есть ли где-нибудь пример, как выбрать область таблицы html с отслеживанием мыши? Например, я нажимаю кнопку мыши и перемещаюсь от второго ряда и второго столбца к шестому ряду и пятому столбцу - тогда эти ячейки должны быть выбраны (например, с другим цветом фона или пунктирной границей), а также информация должна быть запущена так или иначе, которая ячейки выбраны -> 2/2 до 6/5. Есть ли шаблон или пример с таким поведением? Я использую HTML, CSS и AngularJS в своем приложении для внешнего интерфейса - было бы здорово, если бы существовал пример, основанный на этом.

Answer 1

Я думаю, что фрагмент ниже - это то, что вы ищете. Он будет применять CSS класс .hightlight ко всем ячейкам, которые необходимо выделить. Глобальная переменная range будет содержать две координаты выбранного диапазона.

assignEvents();

function assignEvents() {
  var rows = document.getElementsByTagName('tr');
  
  for (let y = 0; y < rows.length; y++) {
    var cells = rows[y].children;
    
    for (let x = 0; x < cells.length; x++) {
      cells[x].onclick = function() {
        cellClick(x, y);
      }
      
      cells[x].onmouseenter = function() {
        mouseEnterCell(x, y);
      }
    }
  }
}

var selecting = false;
var anchor = {"x": 0, "y": 0};
var range = [anchor, anchor];

function cellClick(x, y) {
  var cell = document.getElementsByTagName('tr')[y].children[x];
  
  if (selecting == false) {
    anchor.x = x;
    anchor.y = y;
    
    range = [anchor, anchor];
    
    selecting = true;
  } else {
    selecting = false;
  }
}

function mouseEnterCell(x, y) {
  if (selecting) {
    highlightRange(anchor.x, anchor.y, x, y);
    range = [anchor, {"x": x, "y": y}];
  }
}

function highlightRange(ax, ay, mx, my) {
  var oldRangeHighlights = document.getElementsByClassName('highlight');
  
  while (oldRangeHighlights.length > 0) {
    oldRangeHighlights[0].classList.remove('highlight');
  }
  
  if (mx < ax) {
    var tx = ax;
    
    ax = mx;
    mx = tx;
    
  }
  
  if (my < ay) {
    var ty = ay;
    
    ay = my;
    my = ty;
  }
  
  var w = (mx - ax) + 1;
  var h = (my - ay) + 1; 
  
  for (x = 0; x < w; x++) {
    for (y = 0; y < h; y++) {
      document.getElementsByTagName('tr')[y + ay].children[x + ax].classList.add('highlight');
    }
  }
}

table {
  border-collapse: collapse;
}

td {
  width: 20px;
  height: 20px;
  
  border: 1px solid black;
}

.highlight {
  background-color: yellow;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Объяснение

Функция assignEvents() вызывается при загрузке файла. Он получает все строки таблицы и зацикливает их. Для каждого row выбираются все cells и данные события. onclick предназначен для обнаружения щелчков, чтобы начать или остановить выбор, а onmouseenter используется для изменения текущего выбора.

selecting будет истинным, если пользователь в настоящее время выбирает область
anchor будет содержать значения x и y исходной точки, по которой щелкнули
range, будет содержать якорь x и y, а также x и y, захваченные onmouseenter событие

cellClick() вызывается при нажатии на ячейку. Он получает ячейку, по которой щелкнули, и проверяет, выбирает ли пользователь текущий диапазон. Если нет, он запустится и определит anchor и range. Если это так, то выбор закончится.

mouseEnterCell() вызывается, когда мышь входит в ячейку. Если пользователь выбирает диапазон, он обновит текущий выбор.

highlightRange() выделит диапазон, заданный двумя координатами. Во-первых, он удаляет все старые блики. Он установит якорь (ax, ay) в положение, самое высокое к вершине. Ширина (w) и высота (h) затем рассчитываются для коробки. Затем они выбираются и получают CSS класс highlight.

Если вам нужно что-то изменить, просто скажите.