Help with clipboard.js and td cells / td

Question

Help with clipboard.js and td cells / td

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a dilemma with clipboard.js

What happens is that I have a couple of cells which I would like to click on the field of the cell is copied to the clipboard. As a test, I did the following:

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.3/dist/clipboard.min.js"></script>
<script>
    var clipboard = new Clipboard('.btn');
</script>

And in the view

<table class="table table-bordered btn-hover" id="example1">
    <thead>
        <tr>
            <th>Apellido Paterno</th>
        </tr>
    </thead>
    <?php if (!empty($contratos)): ?>
    <?php foreach ($contratos as $contrato): ?>
    <tr>
        <td id="cp">
            <?php echo $contrato->ap_paterno; ?>
            <button class="btn" data-clipboard-target="#cp">
                Copiar
            </button>
        </td>
        <?php $data_cliente_view =
        $contrato->id_cliente . "*" .
        $contrato->ap_paterno;?>
    </tr>
</table>

What as a result is the following:

Evidently is not practical , I know. But I wanted to see if this script would work but it was not, if it does, but this example only copies the first value that clicks on the button (fence: if I copy Perez, then I try to copy Gonzalez keeps the value de Perez).

The objective here is that it works (first that you can freely copy all value within the cell) and also remove the button. Thank you very much for taking a look at my problem ...

jquery php codeigniter script

asked by González 20.12.2017 в 02:26

source

2 answers

1

Your main problem is id repeated, remember that you should never repeat id in a site, one way to generate id that does not repeat is to use the index $key that provides the foreach , then to remove the button you just have to add a class to the <td> on which the clipboard is executed and add the respective data-clipboard-target attribute:

<table class="table table-bordered btn-hover" id="example1">
    <thead>
        <tr>
            <th>Apellido Paterno</th>
        </tr>
    </thead>
    <?php if (!empty($contratos)): ?>
    <?php foreach ($contratos as $key => $contrato): ?>
    <tr>
        <td id="cp_<?= ($key + 1) ?>" class="dato" data-clipboard-target="#cp_<?= ($key + 1) ?>">
            <?php echo $contrato->ap_paterno; ?>
        </td>
        <?php $data_cliente_view =
        $contrato->id_cliente . "*" .
        $contrato->ap_paterno;?>
    </tr>
    <?php endforeach; ?>
    <?php endif; ?>
</table>

<script>
    var clipboard = new Clipboard('.dato');
</script>

I leave you a functional example:

var clipboard = new Clipboard('.dato');

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.3/dist/clipboard.min.js"></script>

<table class="table table-bordered btn-hover" id="example1">
    <thead>
        <tr>
            <th>Apellido Paterno</th>
        </tr>
    </thead>
    <tr>
        <td id="cp_1" class="dato" data-clipboard-target="#cp_1">
            Vasquez
        </td>
    </tr>
    <tr>
        <td id="cp_2" class="dato" data-clipboard-target="#cp_2">
            Perez
        </td>
    </tr>
    <tr>
        <td id="cp_3" class="dato" data-clipboard-target="#cp_3">
            Gonzalez
        </td>
    </tr>
</table>

answered by 20.12.2017 в 02:54

Hide and show content when pressing buttons? How can I go from one activity to another without losing data?

score 1 · Accepted Answer

It's because data-clipboard-target refers to ID cp and that ID is repeated in all rows. The IDs have to be unique.

I put only part of the code to not complicate it:

<?php foreach ($contratos as $i => $contrato): ?>
    <tr>
        <td id="cp<?php echo $i ?>">
            <?php echo $contrato->ap_paterno; ?>
            <button class="btn" data-clipboard-target="#cp<?php echo $i ?>">
                Copiar
            </button>
        </td>
    </tr>
<?php endforeach; ?>

In this way, a unique ID is generated for each row cp0 , cp1 , etc.

EDIT:
Regarding the 2nd part of your question, to remove the button and copy the text when you click on the cell, you have to do something like this:

<?php foreach ($contratos as $i => $contrato): ?>
    <tr>
        <td class="cp" id="cp<?php echo $i ?>" data-clipboard-target="#cp<?php echo $i ?>">
            <?php echo $contrato->ap_paterno; ?>
        </td>
    </tr>
<?php endforeach; ?>

<script>
    var clipboard = new Clipboard('.cp');
</script>

That is, you put a class to TD (I put cp ) and the data-clipboard-target refers to itself.