Javascript скопировать ячейку таблицы слева в буфер обмена - PullRequest
Новая
       7

Javascript скопировать ячейку таблицы слева в буфер обмена

0 голосов
/ 24 февраля 2019

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

Например, ячейка 1 заполняется определенными идентификаторами для поля «ИМЯ»фильтровать результаты поиска.Я хочу иметь возможность вставить кнопку копирования в ячейку 3 для копирования данных из ячейки 2 (ИМЯ)

Буду признателен за любую помощь!

Пример работы инструмента 

var table = document.createElement("table");

var header = table.createTHead();
    var row = header.insertRow(0);     
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);


    cell1.innerHTML = "<b>ID</b>";
    cell2.innerHTML = "<b>FAQ</b>";
    cell3.innerHTML= "<b>COPY BUTTON</b>";

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < json.records.length; i++) {

       tr = table.insertRow(-1);
            var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = json.records[i].ID;
                tabCell = tr.insertCell(-1);
                tabCell.innerHTML = json.records[i].NAME;
        tabCell = tr.insertCell(-1);
                        tabCell.innerHTML = json.records[i].COPY BUTTON;
        }


    //  ADD TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    document.getElementById("loader").style.visibility = "hidden";
    $("#re").css("visibility","visible");
});
}

  function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("showData");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }       
    }
  }

1 Ответ

0 голосов
/ 24 февраля 2019

это может вам помочь: 

function CopyMyLeftTd(e) {
var leftTdIndex= $(e).parent().index()-1;
var leftTd= $(e).closest("tr").find("td:eq(" + leftTdIndex + ")");
copyToClipboard($(leftTd).text());
}

function copyToClipboard(txt) {
 var el = document.createElement('textarea');
 
  el.value = txt;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">

<table class= 'table table-bordered'>
<tr>
  <td>3</td>
  <td>text to be copied!</td>
  <td><button style="button" onclick="CopyMyLeftTd(this)" >
  Copy
  </button></td>
</tr>
</table>

</div>
...