为什么复制按钮在我单击时不会针对匹配文本区域？

Question

复制目标与真实表数据不匹配

我试图使复制(salin)按钮复制每个数据在表数据/表的文本区域。但问题是目标不匹配的文本区域，它应该是目标复制。请帮帮我。我使用Codeigniter和Javascript。下面的代码是:

TABLE:
<tbody>
<?php
foreach ($orderresep as $row) :
?>
<tr>
<td><?= $row->NOREG; ?></td>
<td><?= $row->NORM; ?></td>
<td><?= $row->DESKRIPSI; ?></td>
<td><?= $row->PEMBERI_RESEP; ?></td>
<td><?= $row->NAMA; ?></td>
<td>
<textarea class="form-control" id="text-copy" readonly value="">
<?= $row->GROUPP; ?>
</textarea>
<button class="btn btn-primary btn-sm mt-1" onclick="copyText()">
<i class="fa fa-copy"></i> Salin
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
JAVASCRIPT:
<script type="text/javascript" lang="javascript">
function copyText() {  
document.getElementById("text-copy").select();   
document.execCommand("copy");
}
</script>

Answer 1

问题是所有的文本区域都有相同的id。文档。getElementById将查找与id匹配的第一个元素并返回它，这就是为什么总是得到表上的第一行。

你可以试试:

<button onclick="copyText(event)">Salin</button>
function copyText(event) {
const textArea = event.target.previousElementSibling;
textArea.select();   
document.execCommand("copy");
}

这段代码所做的是将当前事件传递给copyText函数，然后遍历DOM到它上面的下一个元素，即textarea。

另一种选择是在for循环中添加一个索引，并将其添加到元素的id中，然后使用它来查找正确的行。