Afficher plus d'informations à partir d'une ligne de tableau
J'ai un tableau qui contient des informations de base sur un produit. En cliquant sur une ligne, je souhaite afficher plus d'informations (sur la même page) pour ce produit où un utilisateur peut modifier certaines informations. J'ai essayé d'utiliser une ligne de tableau masquée entre chaque produit qui se développe lorsque l'on clique sur une ligne de produit.
Le problème est que le <form> L'élément n'est pas autorisé à l'intérieur des tables, donc cela ne me semble pas juste, il doit y avoir une meilleure façon de résoudre ce problème?
Deux modèles me viennent à l'esprit:
Forme modale contextuelle lorsque vous cliquez sur modifier en ligne:
ou
Placez le formulaire d'édition ci-dessous lorsqu'ils cliquent sur la ligne.
Je dirais que la forme modale contextuelle est un peu meilleure, car "plus d'informations" qui se chargent sous la grille de données peuvent ne pas être visibles pour l'utilisateur.
Je recommande de jeter un oeil aux réponses à cette question: Meilleur design pour afficher la liste sous une liste d'articles? . L'une des suggestions semble particulièrement adaptée à vos besoins:
Cela utilise des lignes de table imbriquées et permet la modification en ligne des données, ce que votre scénario requiert.
(Remarque: je ne suis pas clair sur les restrictions concernant l'utilisation de <form> dans un tableau. Mais je sais ASP a une prise en charge plus ou moins intégrée pour l'édition de table en ligne, donc il doit probablement y avoir un moyen sémantiquement raisonnable de l'implémenter? Mais d'un point de vue UX, ce n'est pas un exigence impérative.)
Peut-être en utilisant des séparateurs à l'intérieur des tables? Je ne sais pas si c'est nécessairement un "correctif" mais c'est certainement une option qui mérite d'être essayée.
Un inconvénient en utilisant une fenêtre modale sur la table est d'avoir les informations dans la table derrière, et les utilisateurs peuvent ne pas être en mesure de les voir si nécessaire.
Si seulement trois colonnes peuvent être modifiées, je recommanderais une modification en ligne. 