Выберите полную таблицу с 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') );">