table HTML simple avec des valeurs NXM. L'objectif est de fusionner des cellules égales dans la colonne avec jQuery. Remarque, que dans une rangée, il n'y a pas de doublons.
J'ai la façon de cacher les cellules égales, mais y a-t-il un moyen de combiner une cellule avec des données avec une cellule vide en une?
HTML: js: upd a fait une bonne solution pour 2 cellules. ici est sa solution.
Mais s'il y aura plus de 2 cellules égales. .parsjson () d'abord et mettez des données dans la table à l'aide de:
6 Réponses :
Si je reçois ce que vous voulez dire ici, cette version modifiée: rowspan doit être utilisé quelque part pour y parvenir. Voici une autre version, qui définit des rangées sur le temps lors de l'insertion des cellules dans la table, à côté du fait qu'il fonctionne avec 3 cellules en double et plus, il est également plus rapide, car il évite de re-rendu de la table (bien qu'il puisse être optimisé davantage, mais je ne pense pas à ce moment que vous voulez vous soucier de IT, l'optimisation prématurée est la racine de tout mal!):
4 commentaires
Il y avait un bug, où les secondes cellules ne se fusent pas, je vais simplement être corrigée en utilisant
Une dernière chose, s'il y aura plus de 2 cellules égales?
Vous pouvez commencer à partir de la dernière ligne et travailler à votre chemin pour gérer plus de 2 cellules égales
@alfrednsh, maintenant j'essaie de comprendre pourquoi Jsfiddle montrer une erreur: "Les déclarations de fonction ne doivent pas être placées dans des blocs"
masquer au lieu de supprimer .
Veuillez trouver la réponse améliorée pour votre requête avec la ligne Développer / Collapse. Voici mon violon:
Semble cool aussi bien que complexe pour une tâche aussi simple. Mais voici votre +1
J'ai vraiment aimé la première solution Farid, mais je devais sélectionner la gamme de lignes et quelles colonnes qu'il serait appliquée, j'ai donc fait quelques modifications (y compris la possibilité de plus de 2 cellules fusionnées). http://jsfiddle.net/djhu7/72/
Voici une version annoncable de La réponse de Carla :
p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="SummerizeTable('#table1')">Summerize</button>
<table id="table1" border="1" cellspacing="0" >
<thead>
<tr>
<th>State</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>VT</td>
<td>Burlington</td>
<td>Elm</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Main</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Oak</td>
</tr>
<tr>
<td>NY</td>
<td>Albany</td>
<td>State</td>
</tr>
</tbody>
</table>
note : les commentaires disent J'ai étendu la solution de Carla.
Avec deux fonctions, nous pouvons fusionner horizontalement ou verticalement
et exclure ou inclure des cellules à fusionner.
Essayez l'échantillon de travail. https://jsfiddle.net/bn3u63pe si le texte est identique , mais la fonction est en train de comparer la sortie de .html () qui pourrait différer façons qui doivent être transparents à l'utilisateur (en raison de différents attributs ou de champs cachés ou non des identifiants textuels). Il pourrait donc être préférable de comparer le TALMMED texte de chaque comme ceci $. Couper ($ this.text ())
1
votes
/*
* merge horizontally
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByCol(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative to go to the end of cols
) {
/*
console.log('autoMergeByCol tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('rowspan')) {continue;}
var cellNext = $($(theCell).parent().children()[colIndex + span]);
while(cellNext != undefined
&& $(theCell).text() == $(cellNext).text()
&& colIndex + span <= colEnd ) {
span++;
cellNext.hide();
cellNext = $($(cellNext).parent().children()[colIndex + span]);
}
if(span > 1) $(theCell).attr('colspan', span);
}
}
}
/*
* merge vertically
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByRow(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative
) {
/*
console.log('autoMergeByRow tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('colspan')) {continue;}
var cellBelow = $($(theCell).parent().next().children()[colIndex]);
while(cellBelow != undefined
&& $(theCell).text() == $(cellBelow).text()) {
span++;
cellBelow.hide();
cellBelow = $($(cellBelow).parent().next().children()[colIndex]);
}
if(span > 1) $(theCell).attr('rowspan', span);
}
}
}
0 commentaires
1
votes
$(document).ready(function () {
SummerizeTable($('#example'));
})
function SummerizeTable(table) {
$(table).each(function () {
$(table).find('td').each(function () {
var $this = $(this);
var col = $this.index();
var html = $this.html();
var row = $(this).parent()[0].rowIndex;
var span = 1;
var cell_above = $($this.parent().prev().children()[col]);
while (cell_above.html() === html) {
span += 1;
cell_above_old = cell_above;
cell_above = $(cell_above.parent().prev().children()[col]);
}
if (span > 1) {
$(cell_above_old).attr('rowspan', span);
$this.hide();
}
});
});
}
See Working Example here.
0 commentaires
Alors, ici "premier" et "A" devrait être une cellule?
"Première" et la cellule vide sous elle devrait être fusionnée. S'il vous plaît, vérifiez le jsfiddle