Sélectionnez du texte dans une colonne d'une table html
Est-il possible de sélectionner le texte (c'est à dire il a mis en évidence, de sorte qu'il peut être copier+coller) de chaque cellule dans une colonne verticale d'un tableau HTML.
Est-il une méthode JavaScript, ou peut-être un équivalent dans certains navigateurs de l'Alt-Cliquer-Glisser le raccourci utilisé dans de nombreux éditeurs de texte?
Ou est-ce impossible?
source d'informationauteur cbp
Vous devez vous connecter pour publier un commentaire.
Ce que vous cherchez est appelé
Range
objet (TextRange
dans IE).Mise à jour:
Voici un code qui fonctionne pour faire ce qu'on vous suggère: http://jsfiddle.net/4BwGG/3/
Lors de la capture le contenu de la cellule, vous pouvez mettre en forme, de quelque manière que vous le souhaitez. Je suis tout simplement en ajoutant une nouvelle ligne à chaque fois.
Remarque:
Une alternative, c'est d'appliquer un style CSS que simule mettant en évidence sur le clic de l'en-tête de colonne et une boucle dans toutes les cellules de capter leur contenu. Regarder et se sentir de cette approche diffère d'un natif de la sélection d'oeil (à moins que vous en quelque sorte la prise de vue sélectionnez l'événement et de modifier la appearnce).
Ensuite utiliser jQuery copie plugin pour les copier dans le presse-papiers.
Du code outils de revue de mettre en œuvre ce pour permettre la copie & coller du code à partir d'un côté d'un côté à-côté de diff. J'ai regardé dans la façon dont ReviewBoard tire.
L'essentiel est:
user-select: none
(et ses préfixé variantes, si nécessaire). Cela crée l'apparence d'une colonne de sélection. Les autres colonnes sont encore secrètement choisi afin que vous avez à...copy
événement et le changement de sa charge utile afin de refléter le contenu de la colonne sélectionnée.La ReviewBoard code pour ce faire consiste à cette CSS et ce JavaScript.
Je l'ai sorti dans un assez minime jsbin démo.
Voici le CSS pour créer l'apparence d'une seule colonne de sélection (vous ajoutez le
selecting-left
classe à la table lors de la colonne de gauche est sélectionné, ouselecting-right
pour la droite):Voici le code JavaScript pour intercepter le
copy
de l'événement et de le brancher dans une seule colonne de données:Il y a aussi d'autres moins intéressantes de code pour ajouter le
selecting-left
etselecting-right
classes au début de la sélection. Cela nécessite un peu plus de travail à généraliser à n colonnes des tables.Cela semble bien fonctionner dans la pratique, mais il est surprenant de constater combien il est difficile!
Vous pourriez avoir un div qui est renseigné avec les données de la colonne sur cliquez et appliquer une classe css pour donner les colonnes de l'apparence d'être sélectionné
quelque chose comme ceci:
ou vous pourriez avoir un tableau distinct pour chaque colonne, mais je ne pense pas que ce serait la peine.