Выберите полную таблицу с Javascript (для копирования в буфер обмена)
Мне было интересно, если кто-нибудь знает, как выбрать, используя js полную таблицу, чтобы пользователь мог щелкнуть правой кнопкой мыши по выделенному фрагменту, скопировать его в буфер обмена и затем вставить в Excel. Если вы выберете таблицу вручную, процесс будет работать отлично. Но иногда, если высота стола в несколько раз больше, чем экран, выбор его перетаскивания мыши становится утомительным. Поэтому я хочу дать пользователям возможность щелкнуть по кнопке "выбрать всю таблицу", и все будет готово к копированию.
Любые идеи?
Ответы
Ответ 1
Да. Это не слишком сложно, и следующие будут работать во всех основных браузерах (включая IE 6 и даже 5):
(Обновлено 7 сентября 2012 года после комментария Jukka Korpela, указывающего, что предыдущая версия не работала в режиме стандартов IE 9)
Демо: http://jsfiddle.net/timdown/hGkGp/749/
код:
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
</script>
<table id="tableId">
<thead>
<tr><th>Heading</th><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td></tr>
</tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('tableId') );">
Ответ 2
Я получил его для работы в IE9, наконец, используя следующий script
ПРИМЕЧАНИЕ. Он не работает в html-таблицах. Это должно быть ДИВ. Поэтому просто поместите обертку DIV вокруг таблицы, которую вам нужно выбрать!
Сначала я немного изменил код кнопки HTML:
<input type="button" value="Mark table" onclick="SelectContent('table1');">
Затем изменил javascript на:
function SelectContent (el) {
var elemToSelect = document.getElementById (el);
if (window.getSelection) { // all browsers, except IE before version 9
var selection = window.getSelection ();
var rangeToSelect = document.createRange ();
rangeToSelect.selectNodeContents (elemToSelect);
selection.removeAllRanges ();
selection.addRange (rangeToSelect);
}
else // Internet Explorer before version 9
if (document.body.createTextRange) { // Internet Explorer
var rangeToSelect = document.body.createTextRange ();
rangeToSelect.moveToElementText (elemToSelect);
rangeToSelect.select ();
}
else if (document.createRange && window.getSelection) {
range = document.createRange();
range.selectNodeContents(el);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
Ответ 3
Просто, чтобы сделать код, предложенный Тимом Дауном, более полным, позволяя автоматически копировать выбранный контент в буфер обмена:
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
document.execCommand("copy");
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand("Copy");
}
}
</script>
<table id="tableId">
<thead>
<tr><th>Heading</th><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td></tr>
</tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('tableId') );">
