codeigniter 为什么复制按钮在我点击它的时候不匹配文本区域?

vuv7lop3  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(115)

Copy target is doesn't matching in true table data
我尝试做一个复制(salin)按钮来复制表数据/表中的文本区域上的每一个数据。但问题是目标不匹配的textareas它的目标应该是复制。请帮助我。我使用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>
x9ybnkn6

x9ybnkn61#

问题是所有的文本区域都有相同的id。document. getElementById将查找与id匹配的第一个元素并返回它,这就是为什么总是获取表中的第一行。
你可以试试这个:

<button onclick="copyText(event)">Salin</button>

    function copyText(event) {
      const textArea = event.target.previousElementSibling;
      textArea.select();   
      document.execCommand("copy");
    }

这段代码所做的是将当前事件传递给copyText函数,然后遍历DOM到它上面的下一个元素,即文本区域。
另一种选择是在for循环中添加一个索引,并将其添加到元素的id中,然后使用该索引查找正确的行。

相关问题