Formulaires tabulaires (X) HTML

J'ai un ensemble d'éléments qui peuvent être dans divers états. Je veux permettre à un utilisateur d'utiliser un (X) formulaire HTMLFormulaires tabulaires (X) HTML

changer l'état, et
facilement voir l'état d'un groupe d'objets

... donc à ce fin, je voudrais une mise en page comme:

| item1 | radio button for state 1 | radio for state 2 | ... | [update button] | 
| item2 | radio button for state 1 | radio for state 2 | ... | [update button] |

etc. Je préfère les boutons radio à la liste des boîtes de sorte qu'il est facile pour un utilisateur de numériser visuellement des choses dans un certain état.

Cela me semblait être une donnée tabulaire parfaite. Le seul problème est que vous ne pouvez pas avoir de formulaires à l'intérieur d'une table qui traversent les cellules d'une table (c'est-à-dire que <tr> <form> <td> ... n'est pas valide). Je pensais, "hé, je pourrais avoir un formulaire géant enveloppant une table, et faire la valeur [bouton de mise à jour] contenir les ID pour chaque ligne!" Il s'avère que certaines versions de IE envoient TOUTES LES VALEURS DU BOUTON DE SOUMISSION sur n'importe quel formulaire.

Donc je pensais peut-être à l'exposer avec <div> s et placer les formes dans un seul. Mais alors ils cassent une ligne sur chaque <div>. J'ai donc fixé leur largeur et les ai fait float: left. Mais alors ils s'enroulent à l'intérieur des cellules de la table si la rangée du tableau est plus large que la page, et les commandes de la radio ne sont pas alignées avec les en-têtes.

Est-il possible d'étaler cela comme je l'ai prévu? Le XHTML ci-dessous montre la structure prévue. Observez ce qui se passe si vous redimensionnez la fenêtre du navigateur en dessous de la largeur de la table (idéalement, le nom se casserait ou la table afficherait une barre de défilement).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>Test</title> 

<style type="text/css"> 

.state-select, .thing-state-name, .update { 
    float: left; 
    width: 8em; 
} 

.state-select { 
    text-align: center; 
} 

</style> 

</head> 

<body> 

<table> 

<thead> 

<tr> 
<th class="thing-name-header">Thing</th> 

<th> 
<div class="thing-state-name">Present</div> 
<div class="thing-state-name">Absent</div> 
<div class="thing-state-name">Haven't looked</div> 
</th> 

</tr> 
</thead> 

<tbody> 

<tr> 
<td>Apple</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="1" /> 

<div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

<tr> 

<td>Orange</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="2" /> 

<div class="state-select"><input type="radio" name="presence" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

<tr> 

<td>David Bowie</td> 

<td> 
<form action="something" method="post"> 

<input type="hidden" name="id" value="3" /> 

<div class="state-select"><input type="radio" name="presence" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div> 
<div class="update"><input type="submit" value="Update" /></div> 

</form> 

</td></tr> 

</tbody> 

</table> 

</body> 
</html>

Source

2010-04-08 detly

Pourquoi ne pas envelopper la table entière avec un élément de forme, comme vous le dites et au lieu de nommer chaque groupe de boutons radio « présence » leur nom « présence [ID] » où ID est l'ID de la ligne que vous mettent à jour. Par exemple:

<div class="state-select"><input type="radio" name="presence[0]" value="ipresent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[0]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[0]" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div>

...

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> 
<div class="update"><input type="submit" value="Update" /></div>

Ensuite, vous pouvez utiliser PHP en boucle à travers chaque groupe de boutons radio facilement et mettre à jour tous les champs facilement. J'ai testé le code ci-dessous avec le code ci-dessus et cela a plutôt bien fonctionné.

<? 
foreach($_POST['presence'] as $id => $value){ 
    echo "ID ".$id." is ". $value . "<br>"; 
    //Run your update code with the variables $id and $value 
} 
?>

La mise en œuvre cela avec le code que vous avez fourni ressemble à quelque chose comme ceci:

<? 

if(isset($_POST['update'])){ 
    foreach($_POST['presence'] as $id => $value){ 
     echo "ID ".$id." is ". $value . "<br>"; 
     //Run your update code with the variables $id and $value 
    } 
} ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>Test</title> 

<style type="text/css"> 

.state-select, .thing-state-name, .update { 
    float: left; 
    width: 8em; 
} 

.state-select { 
    text-align: center; 
} 

</style> 

</head> 

<body> 

<form method="post"> 
<table> 

<thead> 

<tr> 
<th class="thing-name-header">Thing</th> 

<th> 
<div class="thing-state-name">Present</div> 
<div class="thing-state-name">Absent</div> 
<div class="thing-state-name">Haven't looked</div> 
</th> 

</tr> 
</thead> 

<tbody> 

<tr> 
<td>Apple</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 

</td></tr> 

<tr> 

<td>Orange</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[2]" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence[2]" value="absent" checked="checked" /></div> 
<div class="state-select"><input type="radio" name="presence[2]" value="unknown" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 
</td></tr> 

<tr> 

<td>David Bowie</td> 

<td> 

<div class="state-select"><input type="radio" name="presence[3]" value="present" /></div> 
<div class="state-select"><input type="radio" name="presence[3]" value="absent" /></div> 
<div class="state-select"><input type="radio" name="presence[3]" value="unknown" checked="checked" /></div> 
<div class="update"><input type="submit" name="update" value="Update" /></div> 

</td></tr> 

</tbody> 

</table> 
</form> 

</body> 
</html>

Et en soumettant le formulaire vous donnera:

ID 1 is present 
ID 2 is absent 
ID 3 is unknown

Source

2010-04-08 06:27:31 Sam152

Approche intéressante, mais s'il y a disons 20 articles par page, et un est mis à jour, le serveur doit traiter 20 fois plus de données inchangées. Pourtant, plusieurs mises à jour pourraient être un avantage. (De plus, c'est un backend de CherryPy + un template de Cheetah, donc pas de PHP, mais néanmoins possible.) – detly

Boules, je ne sais pas pourquoi j'ai supposé que c'était PHP. – Sam152

Désolé, j'ai presque oublié d'accepter cela. Cette approche fonctionne mieux avec un peu de JS côté client et AJAX pour éviter de surcharger le serveur.Après tout ce que j'ai fini par utiliser une liste de toutes les façons, mais cela a aidé à comprendre ce qui était sensible ou non. – detly

Formulaires tabulaires (X) HTML

Répondre

Questions connexes