Laravel中HTML表格行复制问题：点击按钮仅复制首行首列

我在Laravel项目中实现HTML表格的行复制功能，表格包含AccName、AccCurrName、AccRaseed、CopyButton四列。当前点击复制按钮时，只会复制首行的首列内容，尝试多种方案无效，求排查问题。

现有代码 #

@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

问题根源 #

1. 全局选择器导致匹配错误：document.querySelector('.copy-text')只会返回页面中第一个带有copy-text类的元素，也就是首行首列的单元格，无法定位到当前按钮所在行的内容。
2. data属性无效：所有按钮的data-clipboard-target都设置为.copy-text，没有区分不同行的目标元素，导致逻辑失效。

解决方案 #

步骤1：修改按钮模板 #

移除无用的data-clipboard-target属性，简化按钮代码：

<a class="modal-effect btn btn-sm btn-info copy-button" 
   data-effect="effect-scale" 
   data-toggle="modal" 
   data-id="{{ $x->AccName }}">
    <i class="las la-pen"></i> Copy
</a>

步骤2：修改JavaScript复制逻辑 #

通过按钮的上下文（所在行）定位目标单元格，拼接当前行的所有内容后复制：

document.addEventListener('DOMContentLoaded', function() {
    const copyButtons = document.querySelectorAll('.copy-button');
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 获取当前按钮所在的行
            const currentRow = this.closest('tr');
            // 获取该行内所有需要复制的单元格
            const targetCells = currentRow.querySelectorAll('.copy-text');
            // 拼接单元格内容（可自定义分隔符，比如制表符、逗号）
            const rowContent = Array.from(targetCells)
                .map(cell => cell.innerText)
                .join('\t');

            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'
            });
        });
    });
});

可选优化 #

如果需要特定格式（如CSV），可以修改拼接分隔符：

const rowContent = Array.from(targetCells)
    .map(cell => `"${cell.innerText}"`) // 给内容加引号避免逗号冲突
    .join(',');

内容的提问来源于stack exchange，提问作者M.J