Как вы можете использовать selectElementContents с getElementsByClassName () для выбора ячеек таблицы с определенным классом? - PullRequest
Новая
       26

Как вы можете использовать selectElementContents с getElementsByClassName () для выбора ячеек таблицы с определенным классом?

0 голосов
/ 09 ноября 2019

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

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

Вместо использования getElementById я хотел бы использовать getElementsByClassName и назначить класс ячейкам таблицы (td), которые я хочу скопировать. Однако я получаю эту ошибку, когда нажимаю кнопку:

Uncaught TypeError: Не удалось выполнить «selectNode» для «Range»: параметр 1 не относится к типу «Node». 

<input type="button" value="Copy table to clipboard" onclick="selectElementContents( document.getElementsByClassName('copy') );">

<select id="myList" onchange="myFunction()" class='form-control'>
<option label="Select State"></option>
<option>US</option>
<option>CA</option>
</select>

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th onclick="sortTable(0)">Option 1</th>
  <th onclick="sortTable(1)">Option 2</th>
  <th onclick="sortTable(2)">Option 3</th>

</tr>
<tr>
  <td class="copy">ABC</td>
  <td class="copy">11</td>
  <td>US</td>

</tr>
<tr>
  <td class="copy">DEF</td>
  <td class="copy">15</td>
  <td>US</td>

</tr>
<tr>
  <td class="copy">GHI</td>
  <td class="copy">1684</td>
  <td>CA</td>

</tr>
</table>
<script>
  function myFunction() {
   var input, filter, table, tr, td, i;
   input = document.getElementById("myList");
   filter = input.value.toUpperCase();
   table = document.getElementById("myTable");
   tr = table.getElementsByTagName("tr");
   for (i = 0; i < tr.length; i++) {
     td = tr[i].getElementsByTagName("td")[2];
     if (td) {
       txtValue = td.textContent || td.innerText;
       if (txtValue.toUpperCase().indexOf(filter) > -1) {
         tr[i].style.display = "";
       } else {
         tr[i].style.display = "none";
       }
     }
   }
 }
     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();
     }
     document.execCommand("Copy");
    // window.getSelection().removeAllRanges();
    // document.selection.empty();

   }
</script>

Я ожидаю, что результат скопирует первые два столбца, поскольку они имеют класс «copy», а не скопируют третий столбец. В настоящее время ничего не копируется.

JSFiddle - https://jsfiddle.net/SMErickson7/qdLr9gpn/

...