Выберите текст в столбце таблицы html.

Ответ 1

То, что вы ищете, называется Range object (TextRange в IE).

Update: Вот рабочий код, чтобы сделать то, что вы предлагаете: http://jsfiddle.net/4BwGG/3/

При захвате содержимого ячеек вы можете отформатировать их любым способом. Я просто добавляю новую строку каждый раз.

Примечание:

• Работает нормально в FF 3 и выше
• IE (до 9) и Chrome не поддерживают множественный выбор.
• Chrome не выделяет все ячейки (но захватывает все содержимое). То же самое касается IE9
• IE 7 и 8 выдадут ошибку.

Альтернативой является применение стиля CSS, который имитирует выделение при щелчке заголовка столбца и циклическое перемещение по всем ячейкам для их содержимого. Внешний вид этого подхода может отличаться от внешнего вида выбора (если вы каким-то образом не захватите выбранное событие и не измените его).

Затем используйте плагин jQuery copy, чтобы скопировать их в буфер обмена.

Ответ 2

Некоторые средства проверки кода реализуют это, чтобы разрешить копирование и вставку кода с одной стороны разного типа. Я посмотрел, как ReviewBoard отключает его.

Суть заключается в следующем:

• Когда начинается выбор столбца, создайте ячейки во всех остальных столбцах с user-select: none (и его префиксными вариантами при необходимости). Это создает вид выбора столбца. Остальные столбцы по-прежнему тайно выбираются, поэтому вам нужно...
• Перехватите событие copy и измените его полезную нагрузку, чтобы отобразить содержимое выбранного столбца.

Код ReviewBoard для этого состоит из этот CSS и этот JavaScript.

Я вытащил его в довольно минимальную jsbin demo.

Здесь CSS, чтобы создать вид выделения из одного столбца (вы добавляете класс selecting-left в таблицу при выборе левого столбца или selecting-right для права):

.selecting-left  td.right,
.selecting-left  td.right *,
.selecting-right td.left,
.selecting-right td.left *,
  user-select: none;
}

.selecting-left  td.right::selection,
.selecting-left  td.right *::selection,
.selecting-right td.left::selection,
.selecting-right td.left *::selection,
  background: transparent;
}

Здесь JavaScript, чтобы перехватить событие copy и подключить к одному столбцу значение данных:

tableEl.addEventListener('copy', function(e) {
  var clipboardData = e.clipboardData;
  var text = getSelectedText();
  clipboardData.setData('text', text);
  e.preventDefault();
});

function getSelectedText() {
  var sel = window.getSelection(),
      range = sel.getRangeAt(0),
      doc = range.cloneContents(),
      nodes = doc.querySelectorAll('tr'),
      text = '';

  var idx = selectedColumnIdx;  // 0 for left, 1 for right

  if (nodes.length === 0) {
    text = doc.textContent;
  } else {
    [].forEach.call(nodes, function(tr, i) {
      var td = tr.cells[tr.cells.length == 1 ? 0 : idx];
      text += (i ? '\n' : '') + td.textContent;
    });
  }

  return text;
}

Там также есть несколько менее интересный код для добавления классов selecting-left и selecting-right в начале выбора. Это потребует немного больше работы для обобщения таблиц n-столбцов.

Это, кажется, хорошо работает на практике, но удивительно, насколько это сложно!

Ответ 3

У вас может быть div, который заполняется данными столбца при нажатии и применяет класс css, чтобы дать столбцам возможность выбора

что-то вроде этого:

var $mytable = $("#mytable"),
    $copydiv = $("#copy_div");

$mytable.find("td").click(function(){

    //get the column index
    var $this = $(this),
        index = $this.parent().children().index($this);

    //find all cells in the same column
    $mytable.find("tr:nth-child(" + index + ")").removeClass("selected").each(function () {
        var $this = $(this);
        $this.addClass("selected");
        $copydiv.html($this.html() + "<br />");
    });
});

или у вас может быть отдельная таблица для каждого столбца, но я не думаю, что это того стоило.