Comment ajouter des colonnes à une table HTML imbriquée

Je suis certes en faveur de DIV, mais je travaille sur un projet qui utilise des tables imbriquées. J'ai besoin de déplacer certains champs qui existent déjà, et créer de nouveaux champs, dans ce que je décrirais comme une grille (pensez gridview dans .NET).Comment ajouter des colonnes à une table HTML imbriquée

Quelle est la manière la plus simple d'ajouter des colonnes aux tables HTML imbriquées? Alternativement, devrais-je étudier l'idée de la refonte de la page entière avec un design sans table, sauf pour les champs dont j'ai besoin dans une grille?

Gridview est quelque chose comme ceci:

Colonnes: Nombre, Amt, notes
lignes: Matériaux, travail, Divers

Source

2010-07-12 SidC

Est-ce que c'est quelque chose qui peut être fait du côté client ou prévoyez-vous seulement de l'implémenter côté serveur? jQuery aide avec ce genre de chose BEAUCOUP du côté du client. – Tim

@Tim, Je suis ouvert à la solution la plus douce. Que suggérez-vous en termes d'utilisation de JQuery?Merci;) – SidC

Si les données sont actuellement en cours d'interrogation et mis dans une table du côté serveur, je devrais vous recommander de le conserver ainsi. L'interaction Ajax après ce point est un jeu juste, mais je ne vois aucun avantage impliquant jQuery plus tôt. – Fosco

Vous devez ajouter < cellules TD > à chaque ligne.

Puisque vous avez dit que vous devez également déplacer les choses, vous devriez envisager de réécrire la structure de sortie dans un format DIV ou une structure de table réécrite. Je préfère les structures de tableaux pour les grilles de données, personnellement.

Source

2010-07-12 16:54:52 Fosco

Merci pour votre suggestion. J'ai essayé d'ajouter une table imbriquée hier soir, et je dois dire que le résultat a été très désordonné. Je vais prendre votre approche pour réécrire au format DIV en utilisant une table uniquement pour la grille elle-même. Merci encore pour votre aide et vos conseils! – SidC

Tout d'abord, je ne sais pas ce que Gridview ressemble ... mais ... Si je comprends bien la question, vous pourriez essayer d'ajouter un <td> avec un <table> à l'intérieur, puis utilisez cette table comme la colonne . Lorsque vous avez terminé avec la colonne ajouter dans un </table></td> et les choses devraient être les mêmes que précédemment. Cependant, cette méthode peut être vraiment compliquée et je ne suis pas sûr à 100% que c'est ce que vous essayez d'atteindre.

Source

2010-07-12 17:00:43

jQuery propose un grand choix de fonctions de déplacement DOM.

Disons que, par exemple, vous commencez avec

<html> 
<body> 
    <table id="aTable"></table> 
</body> 
</html>

Vous pouvez ensuite utiliser jQuery pour ajouter à la table:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#aTable > tbody").append('<tr id="row1"><td>some data</td></tr>'); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"></table> 
</body> 
</html>

Cela ajouterait une seule cellule à la table. Notez la balise tbody, j'ai trouvé que cela est nécessaire car tbody est une balise implicite lorsqu'elle est rendue par les navigateurs.

Maintenant, revenons en arrière. Si vous commencez avec la cellule déjà dans la table, vous pouvez le supprimer très facilement avec la fonction remove():

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#row1").remove(); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"> 
     <tr id="row1"> 
     <td>some data</td> 
     </tr> 
    </table> 
</body> 
</html>

Et hop, il est parti. La bonne chose à faire de cette façon est que vous pouvez utiliser des gestionnaires d'événements et toutes sortes de choses sympas pour faire tout cela de manière interactive. Il n'y a aucun moyen que je puisse même gratter la surface de jQuery parce que je suis assez novice, mais les docs sont plutôt bons.

EDIT: ceci suppose également que vous savez ce que vous allez ajouter. Si vous avez besoin de le faire à la volée, un petit AJAX ira loin (jQuery le résume pour le rendre joli aussi).

Source

2010-07-12 20:35:31 Tim

Merci beaucoup !! Je n'avais pas considéré JQuery comme une option pour cela. – SidC

Comment ajouter des colonnes à une table HTML imbriquée

Répondre

Questions connexes