Est-ce qu'un exemple complet pour fusionner ou diviser des cellules de tableau en javascript?

Question

Je travaille sur un projet web, l'une des fonctionnalités inclut la possibilité pour l'utilisateur de concevoir une table html et de permettre aux utilisateurs de scinder ou fusionner des cellules sans se soucier (j'utilise jQuery pour mon projet). Quelqu'un peut-il m'aider?

Answer 1

J'utiliserais une petite classe pour conserver les attributs de la table en question et ensuite, si nécessaire, réécrivir l'InnerHTML de celle-ci. Bien qu'il semble simple d'ajuster l'attribut colspan d'un élément td, cela ne vous permet pas d'ajouter des colonnes ou des lignes. cela vous permet seulement d'étendre la colonne ou la rangée que vous avez.

Answer 2

Je ne suis pas sûr de ce que vous avez besoin d'aide. Vous devez définir ou supprimer l'attribut colspan sur un élément TD.

Answer 3

Le plugin de table TinyMCE fait exactement ce dont vous avez besoin. Au cas où vous ne le sauriez pas, c'est un éditeur html/texte wysiwyg complet qui produit le code html.

Il est open source et vous pouvez jeter un coup d'oeil:

http://www.tinymce.com/download/download.php

Je suis dans le besoin de la même fonctionnalité et espérais pouvoir la ferraille à partir de là, la mise en œuvre peut-être une version jQuery , mais malheureusement le code est trop complexe pour moi.

Il existe d'autres éditeurs wysiwyg similaires mais, à ma connaissance, aucun d'entre eux n'offre la même fonctionnalité pour joindre ou séparer des cellules, ajouter, supprimer et redimensionner des lignes, et tout cela.

Answer 4

Je viens de trouver un plugin jquery pour fusionner et diviser des cellules de tableau.

Voici le lien: http://www.redips.net/javascript/table-td-merge-split/

Answer 5

J'ai écrit ci-dessous pour le diviser plusieurs cellules et de les fusionner à nouveau ensemble, il est simple mais il fonctionne assez bien pour moi. Je l'ai utilisé une virgule pour séparer les valeurs des cellules, et il sait où diviser les données dans des cellules séparées si nécessaire ...

Javascript:

function mergeCells(cells, separator) { 

    var data = []; 

    $.each(cells, function(i, item) { 
     data.push(item[0].innerHTML); 
    }); 

    var result = $('<td/>', { 
     'html': data.join(separator) 
    }); 

    return result; 
} 

function splitCell(cell, separator) { 

    var result = ""; 
    var data = (cell[0].innerHTML).split(separator); 
    $.each(data, function(i, item) { 
     result = result + "<td>{0}</td>".format(item); 
    }); 

    return result; 
} 

Utilisation:

var merged = $('table').find('td:eq(1)'); 
var splitHtml = splitCell(merged, ", "); 



var cell1 = $('table').find('td:eq(1)'); 
var cell2 = $('table').find('td:eq(2)'); 
var merged = mergeCells({ 
    1: cell1, 
    2: cell2 
}, ", "); 
$(cell1).replaceWith(merged); 
$(cell2).remove();