6
votes

Convertir des colonnes TD en TR ROWS

Y a-t-il un moyen rapide de traduire (en utilisant CSS ou JavaScript) une tablette TD dans TR, actuellement, j'ai: xxx pré>

et je veux traduire en: p>

A 1
B 2
C 3
D 4


0 commentaires

4 Réponses :


8
votes

Vous souhaitez activer HTML disposé comme ceci: xxx

dans ceci: xxx

correct?

Vous pouvez le faire avec JavaScript, cependant, il est difficile de suggérer une méthode sans savoir en savoir plus sur la structure de vos fichiers Site / HTML. Je vais lui donner un aller.

supposer que votre balise

est livrée avec un identifiant (comme celui-ci: Vous pouvez y accéder à JavaScript comme ceci: xxx

Vous pouvez créer une nouvelle table comme celle-ci: xxx

maintenant Vous devez transposer les anciennes lignes dans les nouvelles colonnes de tables: xxx

Ceci devrait faire ce dont vous avez besoin. ÊTRE ANNOIRE: non testé. Travailler ce code JavaScript dans un HTML La page est laissée comme un exercice pour le lecteur. Si quelqu'un dépasse des erreurs que j'ai manquées, je suis gratifié si vous les signalez ou simplement modifier pour corriger :)


2 commentaires

NewTable.Rows [C] .Cells [R] = MyTable.Rows [R] .Cells [C] .innerhtml; doit être NewTable.Rows [c] .Cells [R]. innerhtml = mytable.Rows [r] .Cells [c] .innerhtml;


et vous devriez ajouter document.body.appendchild (NewTable); à la fin, afin d'ajouter l'élément de table au DOM.



2
votes

Voici une fonction testée qui transposera une table et conservera tout formatage / événements que vous aviez accroché à tous les éléments de la table (c.-à-d .:Clicks sur la cellule ou le contenu de la cellule) xxx p> Notes: - nécessite jQuery - Non testé sur de très grandes tables - Frappera probablement des tables avec des colonnes / rangées couvées - sera probablement écarté sur des tables avec une combinaison de THEA / TH

SE Tant que vos tables n'ont pas de cellules couvées et n'utilisent pas THEAD / TH, devrait être bon à partir.


0 commentaires

2
votes

Ceci est une solution, dans ce cas, c'était pour les mobiles et les tablettes, supprimez les requêtes du support et la thème position absolue et vous l'avez!

basé sur ceci: xxx

http://css-tricks.com/responsive-data-tables/


0 commentaires

0
votes

Peut-être que quelqu'un en a besoin: j'ai converti de TR en TD par CSS (une table avec une colonne). Appliquer de la deuxième ligne jusqu'à la fin de la table sur TR Le code ci-dessous:

<tr style="float:left; width:33.33%;"> 


0 commentaires