基于自定义脚本实现Table、TableCell、TableRow的书签标记功能

下面是针对三种表格单元格选中标记行为的自定义书签脚本实现：

1. 选中表格中所有table cell #

执行脚本可给页面所有表格的单元格添加高亮标记，再次执行可清除标记：

javascript:(function(){
  const cells = document.querySelectorAll('table td');
  cells.forEach(cell => {
    cell.classList.toggle('bookmark-highlight');
  });
  // 注入样式确保标记可见
  if (!document.querySelector('#bookmark-style')) {
    const style = document.createElement('style');
    style.id = 'bookmark-style';
    style.textContent = '.bookmark-highlight { background-color: #ffeb3b !important; outline: 2px solid #fbc02d !important; }';
    document.head.appendChild(style);
  }
})();

使用方式：将这段代码添加为浏览器书签，点击书签即可切换所有表格单元格的标记状态。

2. 选中单个table cell #

点击任意表格单元格，可切换该单元格的标记/取消标记状态：

javascript:(function(){
  // 注入样式
  if (!document.querySelector('#bookmark-style')) {
    const style = document.createElement('style');
    style.id = 'bookmark-style';
    style.textContent = '.bookmark-highlight { background-color: #ffeb3b !important; outline: 2px solid #fbc02d !important; }';
    document.head.appendChild(style);
  }
  // 监听单元格点击事件
  document.addEventListener('click', function handleCellClick(e) {
    if (e.target.tagName === 'TD') {
      e.target.classList.toggle('bookmark-highlight');
      e.stopPropagation();
    }
  }, { once: false });
  alert('已启用单个单元格标记功能，点击单元格即可切换标记状态');
})();

使用方式：添加为书签后点击启用，之后点击任意表格单元格就能完成标记或取消标记操作。

3. 从下往上选中表格列 #

按住鼠标从目标列的下方单元格向上拖动，可选中拖动路径内的整列单元格：

javascript:(function(){
  let startCell = null;
  let isSelecting = false;

  // 注入样式
  if (!document.querySelector('#bookmark-style')) {
    const style = document.createElement('style');
    style.id = 'bookmark-style';
    style.textContent = '.bookmark-highlight { background-color: #ffeb3b !important; outline: 2px solid #fbc02d !important; }';
    document.head.appendChild(style);
  }

  // 获取单元格所在列的所有单元格
  function getColumnCells(cell) {
    const colIndex = Array.from(cell.parentElement.children).indexOf(cell);
    const table = cell.closest('table');
    const columnCells = [];
    table.querySelectorAll('tr').forEach(row => {
      const cellInCol = row.children[colIndex];
      if (cellInCol) columnCells.push(cellInCol);
    });
    return columnCells;
  }

  // 处理鼠标按下事件
  document.addEventListener('mousedown', function(e) {
    if (e.target.tagName === 'TD') {
      startCell = e.target;
      isSelecting = true;
      // 先清除当前列已有的标记
      getColumnCells(startCell).forEach(cell => cell.classList.remove('bookmark-highlight'));
    }
  });

  // 处理鼠标移动事件
  document.addEventListener('mousemove', function(e) {
    if (!isSelecting || !startCell) return;
    if (e.target.tagName === 'TD') {
      const currentCell = e.target;
      const columnCells = getColumnCells(startCell);
      const startIndex = columnCells.indexOf(startCell);
      const currentIndex = columnCells.indexOf(currentCell);
      // 确定选中范围：从下往上（索引大的到小的）
      const start = Math.max(startIndex, currentIndex);
      const end = Math.min(startIndex, currentIndex);
      columnCells.forEach((cell, index) => {
        if (index >= end && index <= start) {
          cell.classList.add('bookmark-highlight');
        } else {
          cell.classList.remove('bookmark-highlight');
        }
      });
    }
  });

  // 处理鼠标松开事件
  document.addEventListener('mouseup', function() {
    isSelecting = false;
    startCell = null;
  });

  alert('已启用列选择功能，按住鼠标从下方单元格向上拖动即可选中整列区间');
})();

使用方式：添加为书签后点击启用，按住鼠标在目标列的下方单元格开始向上拖动，即可标记经过的列单元格，松开鼠标完成选择。

内容的提问来源于stack exchange，提问作者Pablo