Dev Faq
2
votes

La sélection d'utilisateur copiée dans le presse-papiers à partir du tableau HTML introduit les onglets

J'ai un tableau HTML affichant un numéro de pièce, avec des composants individuels dans différents . Lorsque les utilisateurs sélectionnent / mettent en évidence la ligne, ils peuvent copier le numéro de pièce et le coller où ils le souhaitent.

Cependant, le numéro de pièce est ensuite collé avec des onglets représentant l'emplacement des différentes cellules entre les caractères.

Comment puis-je faire en sorte que les utilisateurs sélectionnent le tableau et obtenir une version propre (sans onglets) du numéro de pièce? 

<table class="abPartNum">
    <tbody>
    <tr>
    <th>Series Designator</th>
    <th></th><th>Rows</th>
    <th>Body Style</th>
    <th>Body Material</th>
    <th></th>
    <th>Size</th>
    <th></th>
    <th>Contact Type</th>
    <th>Contact Plating</th>
    <th></th>
    <th>Hardware Style</th>
    <th>Polarization</th>
    <th></th>
    <th>Options</th>
    </tr>
    <tr>
    <td class="pnCell">MK</td>
    <td>-</td>
    <td class="pnCell">2</td>
    <td class="pnCell">5</td>
    <td class="pnCell">2</td>
    <td>-</td>
    <td class="pnCell">009</td>
    <td>-</td>
    <td class="pnCell">32</td>
    <td class="pnCell">3</td>
    <td>-</td>
    <td class="pnCell">22</td>
    <td class="pnCell">0R</td>
    <td>-</td>
    <td class="pnCell">
    </td>
    </tr>
    </tbody>
    </table>

Résultat du copier-coller: MK - 2 5 2 - 009 - 32 3 - 22 0R

Résultat souhaité: MK-252-009-323-22-0R

3 commentaires

Pourriez-vous également publier le jQuery associé?

(S'il y en a encore. C'est toujours une question à laquelle il faut répondre s'il n'y en a pas! Donc pas de souci.)

Il n'y a pas (encore) de jquery, l'utilisateur utilise simplement le curseur pour sélectionner la deuxième ligne du tableau.

4 Réponses :

2
votes

Si vous pouvez simplement demander à l'utilisateur de cliquer n'importe où dans la ligne du tableau, cela vous y mènera: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, td { border-collapse:collapse; border: 1px solid black; }
</style>
<table class="abPartNum">
  <tbody>
    <tr>
      <th>Series Designator</th><th></th><th>Rows</th><th>Body Style</th><th>Body Material</th><th></th><th>Size</th><th></th><th>Contact Type</th><th>Contact Plating</th><th></th><th>Hardware Style</th><th>Polarization</th><th></th><th>Options</th>
    </tr>
    <tr>
      <td class="pnCell">MK</td><td>-</td><td class="pnCell">2</td><td class="pnCell">5</td><td class="pnCell">2</td><td>-</td><td class="pnCell">009</td><td>-</td><td class="pnCell">32</td><td class="pnCell">3</td><td>-</td><td class="pnCell">22</td><td class="pnCell">0R</td><td>-</td><td class="pnCell"></td>
    </tr>
  </tbody>
</table>
<hr />
<p id="result"></p>
$('td').click(function(){
  var txt = $(this).parent().children().text()

  $("#result").text(txt)
})

(Remarque: j'avais modifié ceci pour inclure le copy setData de l'événement, mais mes tests montrent qu'il est bogué, au moins sur Firefox, et donc de retour à la version simple.) em>

1 commentaires

Délicieusement simple. Merci!

0
votes

Vous pouvez utiliser javascript pour concaténer les valeurs de ces cellules en une valeur qui peut être copiée par l'utilisateur au format dont vous avez besoin dans une colonne supplémentaire du tableau. par exemple:

HTML rangé comme suit: 

<script>
    var completeCells = document.getElementsByClassName("complete");

    for (item in completeCells){

        var Options = completeCells[item].previousElementSibling;
        var Polarization = Options.previousElementSibling;
        var HardwareStyle = Polarization.previousElementSibling;
        var ContactPlating = HardwareStyle.previousElementSibling;
        var ContactType = ContactPlating.previousElementSibling;
        var Size = ContactType.previousElementSibling;
        var BodyMaterial = Size.previousElementSibling;
        var BodyStyle = BodyMaterial.previousElementSibling;
        var Rows = BodyStyle.previousElementSibling;
        var SeriesDesignator = Rows.previousElementSibling;

        completeCells[item].innerHTML = SeriesDesignator.innerHTML + "-" + Rows.innerHTML + "-" + BodyStyle.innerHTML + "-" + BodyMaterial.innerHTML + "-" + Size.innerHTML + "-" + ContactType.innerHTML + "-" + HardwareStyle.innerHTML + "-" + Polarization.innerHTML + "-" + Options.innerHTML; 

    }

</script>

Puis en utilisant le javascript suivant 

<style type="">

td {border: solid 1px black;}
th {padding:10px;}
</style>
<table class="abPartNum" style="border:solid 1px black;">
<tbody>
<tr>
<th>Series Designator</th>
<th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>

<th>Size</th>

<th>Contact Type</th>
<th>Contact Plating</th>

<th>Hardware Style</th>
<th>Polarization</th>

<th>Options</th>
<th>Complete code</th>
</tr>
<tr>
<td class="pnCell">MK</td>

<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>

<td class="pnCell">009</td>

<td class="pnCell">32</td>
<td class="pnCell">3</td>

<td class="pnCell">22</td>
<td class="pnCell">0R</td>

<td class="pnCell">
</td>
<td class="complete"></td>
</tr>

</tbody>
</table>

0 commentaires
0
votes

La prise en charge du navigateur à ce sujet peut être un peu sommaire: https://caniuse.com/#feat=clipboard

Vous pouvez utiliser l'API du presse-papiers: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

Contrairement à d'autres réponses, cela ajuste en fait les données dans le presse-papiers si vous copiez à l'extérieur le navigateur. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Cick on table row to copy Part Number
<table class="abPartNum">
<thead>
<tr>
<th>Series Designator</th>
<th></th><th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>
<th></th>
<th>Size</th>
<th></th>
<th>Contact Type</th>
<th>Contact Plating</th>
<th></th>
<th>Hardware Style</th>
<th>Polarization</th>
<th></th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">01
</td>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">23</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
</tbody>
</table>
<input id="tmpCode" />

Paste Here:
<textarea></textarea>
.active {
  background-color: #CCF;
}

#tmpCode {display:none;}

Cela pourrait être une meilleure expérience utilisateur cependant 

$(".abPartNum tbody tr").on("click", function(e){    
    $(".abPartNum tbody tr").removeClass("active");
    $(this).addClass("active");
    var pastedData = $(this).children().text();
    $("#tmpCode").val(pastedData).select();
    
    //initiate copy
    document.execCommand('copy');  
    
    //For Debugging
    console.log(pastedData);
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table class="abPartNum">
<tbody>
<tr>
<th>Series Designator</th>
<th></th><th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>
<th></th>
<th>Size</th>
<th></th>
<th>Contact Type</th>
<th>Contact Plating</th>
<th></th>
<th>Hardware Style</th>
<th>Polarization</th>
<th></th>
<th>Options</th>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
</tbody>
</table>

Paste Here:
<textarea></textarea>
$(".abPartNum").on("copy", function(e){
    
    //Get selected data and remove white space
    var pastedData = window.getSelection().toString().replace(/\s/g, "");
    
    //Set the clipboard data
    if (window.clipboardData) {
      //Handle IEs non standard implemtation
      window.clipboardData.setData('text', pastedData);
    }else{
    
    (e.clipboardData || e.originalEvent.clipboardData).setData("text", pastedData);    
    }
    
    //Prevent the normal copy from happening
    e.preventDefault();
    
    //For Debugging
    console.log(pastedData);
} );

1 commentaires

Oui. J'avais essayé de l'introduire, en faisant confiance aux documents MDN, et c'était interdit. CanIUse peint une image plus effrayante. (Mais le vôtre fonctionne sur FF pour moi.)

0
votes

Une façon de résoudre ce problème pourrait être de créer un bouton de copie sur chaque ligne de la table pour chaque code qui peut être copié. Dans l'une des cellules de la ligne, incluez un champ de saisie avec une valeur du code de la ligne et donnez-lui une opacité de 0 pour la masquer. Vous pouvez ensuite lier le bouton de copie au champ de saisie en utilisant le même code pour son identifiant. Lorsque le bouton de copie est cliqué, il utilise ensuite la fonction JavaScript select () pour copier la valeur du champ de saisie, puis utilise execCommand ("copier") pour envoyer le code sélectionné au presse-papiers:

p> 

<table class="abPartNum">
  <tbody>
    <tr>
      <th>Series Designator</th>
      <th></th>
      <th>Rows</th>
      <th>Body Style</th>
      <th>Body Material</th>
      <th></th>
      <th>Size</th>
      <th></th>
      <th>Contact Type</th>
      <th>Contact Plating</th>
      <th></th>
      <th>Hardware Style</th>
      <th>Polarization</th>
      <th></th>
      <th>Options</th>
      <th></th>
    </tr>
    <tr>
      <td class="pnCell">MK</td>
      <td>-</td>
      <td class="pnCell">2</td>
      <td class="pnCell">5</td>
      <td class="pnCell">2</td>
      <td>-</td>
      <td class="pnCell">009</td>
      <td>-</td>
      <td class="pnCell">32</td>
      <td class="pnCell">3</td>
      <td>-</td>
      <td class="pnCell">22</td>
      <td class="pnCell">0R</td>
      <td>-</td>
      <td class="pnCell">
      </td>
      <td><button onClick="copyText('MK-252-009-323-220R')">Copy code</button><input id="MK-252-009-323-220R" class="textToCopy" value="MK-252-009-323-220R"></td>
    </tr>
  </tbody>
</table>
.textToCopy {
  opacity: 0;
}
function copyText(copyId) {
  var copyCode = document.getElementById(copyId);
  copyCode.select();
  document.execCommand("copy");
}

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier