Je travaille sur une page de comptes qui répertorie les transactions (crédits et débits). Je voudrais que l’utilisateur puisse cliquer sur une ligne de la table et que celle-ci se développe en affichant plus d’informations.
J’utilise twitter bootstrap et ai regardé la documentation et c’est le résultat que j’ai
# Date Description Credit Debit Balance 1 05 May 2013 Credit Account $150.00 $150.00 Demo1
Voir: http://jsfiddle.net/2Dj7Y/
Le seul problème est qu’il affiche les “informations déroulantes” au mauvais endroit, je voudrais append une nouvelle ligne, au lieu d’imprimer en haut du tableau
- Erreur: rejet de liste blanche dans Phonegap
- Validation Open Graph pour HTML5
- SelectListItem avec des atsortingbuts de données
- Le HTML5 peut-il communiquer avec des périphériques tels que des scanners et des lecteurs de cartes de crédit?
- Effacement du texte en cas de dépassement avec css si le texte est plus grand que ce qui est autorisé
J’ai également essayé d’append une nouvelle ligne de tableau (qui affiche simplement la ligne et aucune action de réduction (uniquement appliquée à la première ligne))
1 05 May 2013 Credit Account $150.00 $150.00 1 05 May 2013 Credit Account $150.00 $150.00
Voir http://jsfiddle.net/ypuEj/
Cheers, et merci pour votre aide
- événement onchange pour le type d’entrée = «numéro»
- Styliser chaque 3ème élément d’une liste en utilisant CSS?
- Vidéo HTML5 // Masquer complètement les contrôles
- Conversion de vidéo en HTML5 ogg / ogv et mpg4
- vidéo comme arrière-plan du site? HTML 5
Je ne suis pas sûr que vous ayez réussi à surmonter cela, mais je devais travailler sur quelque chose de très similaire aujourd’hui et j’ai fait travailler votre violon comme vous le demandez. contrôle. J’ai essayé d’utiliser simplement effondrement, mais je ne pouvais pas le faire fonctionner et j’ai vu un exemple quelque part sur SO qui utilisait l’accordéon.
Voici votre violon mis à jour: http://jsfiddle.net/whytheday/2Dj7Y/11/
Comme je dois poster le code, voici à quoi devrait ressembler chaque “section” pliable ->
1 05 May 2013 Credit Account $150.00 $150.00 Demo1
En développant la réponse de Tony et en répondant à la question de Dhaval Ptl, pour obtenir le véritable effet d’accordéon et permettre à une seule ligne d’être développée à la fois, un gestionnaire d’événement pour show.bs.collapse peut être ajouté comme ceci:
$('.collapse').on('show.bs.collapse', function () { $('.collapse.in').collapse('hide'); });
J’ai modifié son exemple pour le faire ici: http://jsfiddle.net/QLfMU/116/
Si vous utilisez ng-repeat d’Angular pour remplir la table, l’extrait de jquery de hackel ne fonctionnera pas en le plaçant dans l’événement de chargement de document. Vous devrez exécuter l’extrait de code une fois que le rendu angular de la table est terminé.
Pour déclencher un événement après le rendu de ng-repeat, essayez cette directive:
var app = angular.module('myapp', []) .directive('onFinishRender', function ($timeout) { return { ressortingct: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } });
Exemple complet en angular: http://jsfiddle.net/ADukg/6880/
J’ai reçu la directive d’ici: utilisez AngularJS uniquement à des fins de routage
- Affichage du contenu du stockage local sur Internet Explorer
- Est-ce que vous mettez des balises META Schema Microdata dans le corps HTML?
- Comment utiliser l’événement drop de jQuery pour télécharger des fichiers déplacés depuis le bureau?
- CSS3 transition à sens unique?
- HTML5 live streaming
- Flexbox et défilement vertical dans une application pleine hauteur utilisant NEWER flexbox api
- Atsortingbuts des balises AngularJS
- Accessibilité: convention de texte alternatif recommandée pour SVG et MathML?
- Mise en page HTML simple à deux colonnes sans utiliser de tableaux
- HTML5 avec jQuery – e.offsetX n’est pas défini dans Firefox