Dropdown pour chaque cellule dans les données tabulaires

Question

J'ai une très grande table html qui est similaire à ce qui suit:

<table> 
    <tr> 
     <td>value1</td> 
     <td>value2</td> 
    </tr> 
    <tr> 
     <td>value3</td> 
     <td>value4</td> 
    </tr> 
</table> 

Pour chaque valeur que je dois avoir un menu déroulant, où un utilisateur peut cliquer pour modifier la valeur . Cela déclencherait une fonction ajax. Quelle serait la meilleure façon de faire cela? Une liste déroulante dans chacun? Une liste déroulante qui change de position? Comment devrais-je ajouter cela?

Answer 1

This solution change la cellule à un menu déroulant lorsque vous cliquez dessus, et revenir à une cellule lorsqu'une valeur est sélectionnée, juste au cas où cela a été l'effet désiré.

Answer 2

Quelque chose de semblable à cela, je suppose. :) J'ai utilisé jQuery. :)

$("tr").each(function(){ 
    $("td").each(function(){ 
     var before = $(this).text(); 
     $(this).html("<select><option>"+before+"</option></select>"); 
    }); 
});​ 

jsFiddle Example

Answer 3

Certains cela dépend de l'expérience que vous voulez pour l'utilisateur, mais je pencherais en vue de mettre un élément de sélection dans chaque cellule de table. Vous pouvez ensuite masquer la sélection jusqu'à ce que l'utilisateur sélectionne l'une des valeurs à modifier ou que les éléments de sélection soient visibles tout le temps. Cela est plus facile car vous pouvez placer les valeurs dans la zone de sélection avant que le navigateur ne rende la page. Si ce n'est pas utilisable, par exemple, si le navigateur a du mal à rendre la page en raison de la taille du balisage, alors vous pouvez passer à l'utilisation d'un seul élément select.

Si vous utilisez une seule zone de sélection, cela vous obligerait à la déplacer vers la cellule appropriée et à déterminer également comment obtenir les valeurs possibles dans la zone de sélection. Vous pouvez utiliser un attribut de données sur vos balises td pour stocker les données, ou vous pouvez effectuer un appel ajax. Mais cela pourrait être bavard si vous revenez au serveur chaque fois qu'une cellule doit être éditée. Fondamentalement, ce serait l'option la plus difficile à obtenir.

Commencez par le moyen simple (sélectionnez dans chaque td). Et si cela s'avère problématique, passez à la plus difficile. C'est ce que je ferais.

Answer 4

Très bien, j'ai réussi à le faire fonctionner. C'est une alternative à mon autre réponse. Cela fait que chaque tr soit une liste déroulante et les tds sont les options. J'ai utilisé jQuery.

$("tr").each(function(i){ 
    $("td").each(function(){ 
     $(this).replaceWith("<option>"+$(this).text()+"</option>"); 
    }); 
    $(this).replaceWith("<select>"+$(this).html()+"</select>");  
}); 

Updated jsFiddle Example