在 html 中复制一行

Question

我正在尝试复制 html 中的一行，我有一个包含 4 列的表 帐号名称。 AccCurrName。 AccRaseed。 复制按钮。

我正在使用 Laravel，并且使用以下代码：

@extends('layouts.master')

@section('css')
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/css/joul.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/css/iziToast.min.css') }}" rel="stylesheet">
@endsection


<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th style="width: 50%;">Cus</th>
            <th style="width: 20%;">Curr</th>
            <th style="width: 20%;">Raseed</th>
            <th style="width: 10%;">Copy</th>
        </tr>
    </thead>
    <tbody>
    @foreach($result as $x)
    <tr>
        <td class="copy-text">{{$x->AccName}}</td>
        <td class="copy-text">{{$x->AccCurrName}}</td>
        <td class="copy-text">{{$x->AccRaseed}}</td>
        <td>
            <a class="modal-effect btn btn-sm btn-info copy-button" 
            data-effect="effect-scale" 
            data-toggle="modal" 
            data-id="{{ $x->AccName }}" 
            data-clipboard-target=".copy-text">
                <i class="las la-pen"></i> Copy
            </a>
        </td>
    </tr>
@endforeach

</tbody>

</table>
@endsection





@section('js')
<!-- Internal Data tables -->
<script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/responsive.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/jszip.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/pdfmake.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/vfs_fonts.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>
<script src="{{ URL::asset('assets/js/modal.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
<script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>
<script src="{{ URL::asset('assets/js/joul.js') }}"></script>
<script src="{{ URL::asset('assets/js/iziToast.min.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const copyButtons = document.querySelectorAll('.copy-button');
        copyButtons.forEach(button => {
            button.addEventListener('click', function() {
                const rowId = this.getAttribute('data-clipboard-target');
                const rowContent = document.querySelector(rowId).innerText;

                const tempTextarea = document.createElement('textarea');
                tempTextarea.value = rowContent;
                document.body.appendChild(tempTextarea);

                tempTextarea.select();
                document.execCommand('copy');

                document.body.removeChild(tempTextarea);

                iziToast.success({
                    title: 'Done',
                    message: 'Copied!',
                    position: 'bottomRight'
                });
            });
        });
    });
</script>




@endsection

但是该代码复制了第一行的第一列，问题出在哪里？ 我尝试应用许多解决方案但没有结果。 请帮助我了解问题

Answer 1

我的建议是使用最接近的委派和导航

您还有多个源单元格

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("example").addEventListener('click', (e) => {
    const tgt = e.target.closest(".copy-button");
    if (!tgt) return; // not a copy button
    const rowContent = [...this.closest('tr').querySelectorAll('.copy-text')].map(cell => cell.textContent).join(", ");

    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = rowContent;
    document.body.appendChild(tempTextarea);

    tempTextarea.select();
    document.execCommand('copy');

    document.body.removeChild(tempTextarea);

    iziToast.success({
      title: 'Done',
      message: 'Copied!',
      position: 'bottomRight'
    });
  });
});

我还会考虑查看 clipboard api，因为 exec 命令已被弃用

Answer 2

我得到了解决方案：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const copyButtons = document.querySelectorAll('.btncopy');
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const textToCopy = this.getAttribute('data-clipboard-text');

            const tempTextarea = document.createElement('textarea');
            tempTextarea.value = textToCopy;
            document.body.appendChild(tempTextarea);

            tempTextarea.select();
            document.execCommand('copy');

            document.body.removeChild(tempTextarea);

            iziToast.success({
                title: 'done',
                message: 'Done!',
                position: 'bottomRight'
            });
        });
    });
});