0

I'm trying to copy a row in html, I have a table contains 4 columns AccName. AccCurrName. AccRaseed. CopyButton.

I'm working with Laravel and I'm using the following code:

@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

but that code copies the first column from the first rows, what is the problem in? I tried to apply many solution but without result. please help me to know the problem

M.J
  • 143
  • 9
  • Please click [edit], then the button shaped liek this: `[<>]` which is the snippet editor. Paste RENDERED HTML and relevant script into the respective panes and add a CDN version of your framework so we have a [mcve]. I also strongly suggest to DELEGATE from the main container instead of adding event listeners to all buttons. Also it seems you have several copies of many of your JS files loaded. You should only have ONE of each – mplungjan Jul 15 '23 at 13:25
  • @mplungjan sorry but I'm new in Web so I didn't understand what I should do well – M.J Jul 15 '23 at 13:28
  • Your code uses ".copy-text" as the target to copy, and looks for that selector with `.querySelector()`. That function will only return one element. What you probably should do is find the first `` in a row, then copy the `` parent content to the textarea. That will get the entire row. (I think it would be better to drop the content in a hidden element in the row, so that you have more control over exactly what to copy.) – Pointy Jul 15 '23 at 13:29

2 Answers2

0

Delegation and navigation using closest is my suggestion

Also you have more than one source cell

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

I would also consider looking at the clipboard api since the execcommand is deprecated

mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

I got the soltuion:

<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'
            });
        });
    });
});
M.J
  • 143
  • 9