@zxcursed

Как скопировать информацию из нескольких элементов?

Добрый день, есть таблица:

<table id="table1" table class="table table-bordered table-hover">
<thead class="thead-dark">
   <tr class="header">
      <th>Колонка 1</th>
      <th>Колонка 2</th>
      <th>Колонка 3</th>
</thead>
</tr>
<tr>
   <td>
      <span id="kolonka1" data-clipboard-action="copy" data-clipboard-text="Текст колонки1">Текст колонки 1</>
   </td>
   <td>
      <select class="selectpicker" id="kolonka2">
         <option value="значение 1"></option>
         <option value="значение 2"></option>
      </select>
   </td>
   <td>
      <select class="selectpicker" id="kolonka3">
         <option value="значение 1"></option>
         <option value="значение 2"></option>
      </select>
   </td>
</tr>
</table>


В данный момент из неё я копирую данные только из первого столбца через clipboard.js библиотеку, но появилась потребность модифицировать данные с помощью изменения значения второго и третьего столбца, каким образом лучше всего это сделать? У меня в голове несколько вариантов:
1. При изменении значений второй и третьей колонки модифицировать "data-clipboard-text" первой колонки через JS/PHP

Так же вытекает следующая проблема в том, что "строк" в таблице может быть более 300-400, необходимо при изменении значения второго/третьего столбца верно присваивать их к значению первого

UPD:
Удалось добиться примерно желаемого результата таким образом:

var clipboard = new ClipboardJS('.kolonka1',{
    text: function(trigger) {
        var 1= document.querySelector('.kolonka1').getAttribute('data-clipboard-text');
        var 2= document.querySelector('#kolonka2').value;
        var 3= document.querySelector('#kolonka3').value;
        return 1 + 2 + 3;
    }
});

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});


Но проблема в том, что всегда копируются значения первой "строки" таблицы, как указать из какого элемента копировать? (Просто пронумеровать каждую строку таблицы, получать её и уже передавать из какого именна номера колонки копировать?)
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы