Ensemble colspan de façon dynamique avec jquery

J'ai une simple structure de la table de ce genre. Ce que je voudrais faire est de les fusionner de manière dynamique des colonnes basée sur une condition au sein de la <td> par exemple, si td1 et td3 sont vides, puis de fusionner les cellules et ne
<td class="col1" colspan="3">1Meeting</td>
J'ai essayé de jouer avec jquery en utilisant:

 $(".tblSimpleAgenda  td:contains('')").hide();

mais il n'avait pas l'effet.

Ce serait la meilleure façon à l'aide de jquery pour atteindre cet objectif.

<table  class="tblSimpleAgenda" cellpadding="5" cellspacing="0">
 <tbody>
 <th align="left">Time</th>
 <th align="left">Room 1</th>
 <th align="left">Room 2</th>
 <th align="left">Room 3</th> 

        <tr valign="top">
            <td class="colTime">09:00 – 10:00</td>
            <td class="col1"></td>
            <td class="col2">Meeting 2</td>
            <td class="col3"></td>
        </tr>

        <tr valign="top">
            <td class="colTime">10:00 – 10:45</td>
            <td class="col1">Meeting 1</td>
            <td class="col2">Meeting 2</td>
            <td class="col3">Meeting 3</td> 
        </tr>

        <tr valign="top">
            <td class="colTime">11:00 – 11:45</td>
            <td class="col1">Meeting 1</td>
            <td class="col2">Meeting 2</td>
            <td class="col3">Meeting 3</td> 
        </tr>
</tbody>
</table>

InformationsquelleAutor Terry Marder | 2009-08-18

html-table jquery

84

Comment sur
```
$([your selector]).attr('colspan',3);
```
J'imagine que le travail, mais n'ont aucun moyen de test pour le moment. À l'aide de .attr() serait l'habitude de jQuery moyen de la définition des attributs d'éléments dans l'ensemble de fractionnement.

Comme il a été mentionné dans une autre réponse, afin d'obtenir ce travail nécessiterait la suppression de la td éléments qui n'ont pas de texte en eux de la DOM. Il peut être plus facile de le faire tous les côté serveur

EDIT:

Comme il a été mentionné dans les commentaires, il y a un bug dans la tentative de définir colspan à l'aide attr() dans IE, mais les travaux suivants dans IE6 et FireFox 3.0.13.

Travail De Démonstration

notez l'utilisation de l'attribut colSpan et pas colspan - l'ancien fonctionne dans IE et Firefox, mais ce dernier ne fonctionne pas dans IE. En regardant jQuery 1.3.2 source, il semblerait que attr() tente de définir l'attribut comme une propriété de l'élément si
1. il existe une propriété sur l'élément (colSpan existe en tant que propriété et la valeur par défaut 1 sur <td> Élémentshtml dans IE et FireFox)
2. le document n'est pas xml et
3. l'attribut n'en est pas de href, src ou le style
à l'aide de colSpan par opposition à colspan fonctionne avec attr() parce que l'ancien est une propriété définie sur l'élément tandis que le second ne l'est pas.

l'automne pour attr() est d'essayer d'utiliser setAttribute() sur l'élément en question, la définition de la valeur d'une chaîne de caractères, mais cela pose des problèmes dans IE (bogue #1070 en jQuery)
```
//convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute( name, "" + value ); 
```
Dans la démo, pour chaque ligne, le texte dans chaque cellule est évaluée. Si le texte est une chaîne vide, alors la cellule est supprimée et un compteur incrémenté. La première cellule de la ligne qui n'a pas class="colTime" a un attribut colspan la valeur du compteur + 1 (pour la durée qu'il occupe lui-même).

Après ce, pour chaque ligne, le texte dans la cellule avec class="colspans" est définie pour l'attribut colspan valeurs de chaque cellule de la rangée de gauche à droite.

HTML
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
td { text-align: center; }
</style>
</head>
<body>
<table  class="tblSimpleAgenda" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<th align="left">Time</th>
<th align="left">Room 1</th>
<th align="left">Room 2</th>
<th align="left">Room 3</th> 
<th align="left">Colspans (L -> R)</th>
</tr>
<tr valign="top">
<td class="colTime">09:00 – 10:00</td>
<td class="col1"></td>
<td class="col2">Meeting 2</td>
<td class="col3"></td>
<td class="colspans">holder</td>
</tr>
<tr valign="top">
<td class="colTime">10:00 – 10:45</td>
<td class="col1">Meeting 1</td>
<td class="col2">Meeting 2</td>
<td class="col3">Meeting 3</td>    
<td class="colspans">holder</td> 
</tr>
<tr valign="top">
<td class="colTime">11:00 – 11:45</td>
<td class="col1">Meeting 1</td>
<td class="col2">Meeting 2</td>
<td class="col3">Meeting 3</td>
<td class="colspans">holder</td>     
</tr>
<tr valign="top">
<td class="colTime">11:00 – 11:45</td>
<td class="col1">Meeting 1</td>
<td class="col2">Meeting 2</td>
<td class="col3"></td>
<td class="colspans">holder</td>     
</tr>
</tbody>
</table>
</body>
</html>
```
jQuery code
```
$(function() {
$('table.tblSimpleAgenda tr').each(function() {
var tr = this;
var counter = 0;
$('td', tr).each(function(index, value) {
var td = $(this);
if (td.text() == "") {
counter++;
td.remove();
}
});
if (counter !== 0) {
$('td:not(.colTime):first', tr)
.attr('colSpan', '' + parseInt(counter + 1,10) + '');
}
});
$('td.colspans').each(function(){
var td = $(this);
var colspans = [];
td.siblings().each(function() {
colspans.push(($(this).attr('colSpan')) == null ? 1 : $(this).attr('colSpan'));
});
td.text(colspans.join(','));
});
});
```
C'est juste une démonstration pour montrer que attr() peut être utilisé, mais être conscient de la mise en oeuvre et de la croix-navigateur bizarreries qui viennent avec elle. J'ai aussi fait quelques hypothèses à propos de votre tableau de mise en page dans la démo (c'est à dire appliquer la colspan à la première de "non-Temps" cellule de chaque ligne), mais j'espère que vous obtenez l'idée.
- Non, jQuery#attr finalement évalue à HTMLElement#setAttribute, qui ne fonctionne pas pour colspan sur IE. Il a juste totalement ignore.
- Grâce Russ, avec un peu de modifications, je l'ai eu à travailler, malheureusement un peu plus les conditions ont été ajoutées alors maintenant, je suis en utilisant un mélange de côté serveur asp.net et jquery pour gérer le problème.
- pas de problème! Je pense que, personnellement, cela pourrait probablement être gérée beaucoup mieux sur le côté serveur à l'aide de la "Table" des classes comme TableCell, TableRow et la construction de la table pour être rendus dans le code HTML de cette façon. À l'aide d'une boucle et une Liste<TableCell>, il serait facile de définir l'attribut colspan selon la TableCells besoin
- Cam - +1 Merci beaucoup, votre colSpan vs colspan juste sauvé ma vie 😉
- td.parent('tr').children('td').not(td) peuvent être réduits à td.siblings()
- bon point, qui va mettre à jour 🙂
- merci de remarquer "colSpan et pas colspan", m'a aidé avec knock-out attr cartographie ne fonctionne pas sous ie
- J'ai ajouté un JSFiddle qui est une version live de cet exemple: http://jsfiddle.net/J2cvF/
InformationsquelleAutor Russ Cam

J'ai adapté le script de Russ Cam (merci, Russ Cam!) pour mes propres besoins: j'ai eu besoin de fusionner des colonnes qui avaient la même valeur, et pas seulement les cellules vides.

Cela pourrait être utile à quelqu'un d'autre... Voici ce que je suis venu avec:

jQuery(document).ready(function() {
jQuery('table.tblSimpleAgenda tr').each(function() {
var tr = this;
var counter = 0;
var strLookupText = '';
jQuery('td', tr).each(function(index, value) {
var td = jQuery(this);
if ((td.text() == strLookupText) || (td.text() == "")) {
counter++;
td.prev().attr('colSpan', '' + parseInt(counter + 1,10) + '').css({textAlign : 'center'});
td.remove();
}
else {
counter = 0;
}
//Sets the strLookupText variable to hold the current value. The next time in the loop the system will check the current value against the previous value.
strLookupText = td.text();
});
});
});

InformationsquelleAutor Marcos Buarque

2

Vous l'ai dit rowspan dans votre titre, mais j'ai l'impression que vous avez voulu dire colspan; toutes mes excuses si le dessous est éteint parce que j'ai que de mal.

Vous auriez besoin de retirer la cellule de tableau vide de l'élément entièrement, et de modifier l'attribut colspan sur une autre cellule dans la ligne d'englober l'espace dégagé, par exemple:
```
refToCellToRemove.remove();
refTocellToExpand.colspan = 4;
```
Notez que la configuration via setAttribute (qui autrement serait correct) ne fonctionne pas correctement sur IE.

Méfiez-vous: c'est à dire ne de très étranges disposition de table de choses quand vous bricolons avec colspans de façon dynamique. Si vous pouvez l'éviter, je le ferais.
- il peut fonctionner correctement dans IE à l'aide de jQuery attr() tel que démontré dans ma réponse
InformationsquelleAutor T.J. Crowder
1

J'ai trouvé aussi que si vous aviez display:none, puis par programmation changé pour être visible, vous pouvez également définir
```
$tr.css({display:'table-row'});
```
plutôt que display:inline ou display:block sinon, la cellule peut seulement montrer que la prise en hausse de 1 cellule, peu importe comment grand vous avez le colspan défini.

InformationsquelleAutor JayCrossler
0

td.setAttribute('rowspan',x);
- Donc juste ignore complètement si vous le faites, qui autrement serait correct. Vous devez définir colspan comme une propriété, par exemple, theCell.colspan = 4;
InformationsquelleAutor Joshua

Réglage colspan="0" est prise en charge par firefox.

Dans d'autres navigateurs, nous pouvons obtenir autour d'elle avec:

//Auto calculate table colspan if set to 0
var colCount = 0;
$("td[colspan='0']").each(function(){
colCount = 0;
$(this).parents("table").find('tr').eq(0).children().each(function(){
if ($(this).attr('colspan')){
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
$(this).attr("colspan", colCount);
});

http://tinker.io/3d642/4

InformationsquelleAutor John Magnolia

Vous devez vous connecter pour publier un commentaire.