Comment redimensionner une cellule de tableau en utilisant jquery?

Question

J'ai une table 2 cellules et je veux faire le premier redimensionnable avec une main grab en utilisant jQuery

Answer 1

Je recommande également d'utiliser jQuery UI Resizable avec quelques améliorations. Je pourrais le faire fonctionner avec du code HTML valide, en mettant à jour la zone COLGROUP de la table lors du redimensionnement. Je décrit la solution complète à http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

La courte serait:

1) Le tableau HTML spécifie la largeur initiale dans sa zone COLGROUP et a CSS table-layout de la propriété: fixe. 2) Décorez les éléments TH avec l'interface utilisateur de jQuery .resizable(). 3) Lors du démarrage du redimensionnement: Trouvez l'élément COL correspondant du TH actif et souvenez-vous de la largeur de l'original. 4) Lors du redimensionnement: Calculer le delta de redimensionnement et mettre à jour (augmenter/diminuer) l'élément COL sélectionné. Cela va redimensionner la colonne entière avec chaque navigateur.

$(".resizable th").resizable({ 
handles: "e", 

// set correct COL element and original size 
start: function(event, ui) { 
    var colIndex = ui.helper.index() + 1; 
    colElement = table.find("colgroup > col:nth-child(" + 
    colIndex + ")"); 

    // get col width (faster than .width() on IE) 
    colWidth = parseInt(colElement.get(0).style.width, 10); 
    originalSize = ui.size.width; 
}, 

// set COL width 
resize: function(event, ui) { 
    var resizeDelta = ui.size.width - originalSize; 

    var newColWidth = colWidth + resizeDelta; 
    colElement.width(newColWidth); 

    // height must be set in order to prevent IE9 to set wrong height 
    $(this).css("height", "auto"); 
} 
}); 

Answer 2

jQuery UI a un resizable plugin qui vous permettra de faire un élément sur une page redimensionnable. Cependant, je peux imaginer que le redimensionnement des cellules de tableau va être intéressant, d'autant plus qu'elles vont probablement partager l'espace d'affilée. Jetez un oeil à l'option alsoResize; il se peut que vous ayez besoin de réduire l'autre cellule pendant que l'autre augmente et vice versa.

En outre, les IE sont notoires quand il s'agit de manipuler table éléments, donc YMMV.

Answer 3

Je ne connais aucun moyen de faire cela à une table html "vanilla". Cependant, j'utilise actuellement le plugin jQuery jqGrid pour fournir des tableaux de données plus riches sur ma page. Il inclut (entre autres) le redimensionnement de largeurs de colonnes par cliquer-glisser.