Establecer colspan dinámicamente con jquery

Entiende el código bien previamente a usarlo a tu trabajo si tdeseas aportar algo puedes compartirlo con nosotros.

Solución:

Qué tal si

$([your selector]).attr('colspan',3);

Me imagino que funcionará pero no tengo forma de probarlo en este momento. Utilizando .attr() sería la forma habitual de configuración de jQuery attributes de elementos en el conjunto envuelto.

Como se ha mencionado en otra respuesta, para que esto funcione sería necesario eliminar los elementos td que no tienen texto del DOM. Puede ser más fácil hacer esto en todo el lado del servidor

EDITAR:

Como se mencionó en los comentarios, hay un error al intentar configurar colspan usando attr() en IE, pero lo siguiente funciona en IE6 y FireFox 3.0.13.

Demostración de trabajo

fíjate en el uso de la attribute colSpan y no colspan – el primero funciona tanto en IE como en Firefox, pero el último no funciona en IE. Mirando la fuente jQuery 1.3.2, parecería que attr() intentos de establecer el attribute como una propiedad del elemento si

1. existe como una propiedad en el elemento (colSpan existe como una propiedad y por defecto es 1 en Elementos HTML en IE y FireFox)
2. el documento no es xml y
3. los attribute no es href, src o style

utilizando colSpan Opuesto a colspan funciona con attr() porque el primero es una propiedad definida en el elemento mientras que el segundo no lo es.

el fracaso para attr() es intentar usar setAttribute() en el elemento en cuestión, estableciendo el valor en un stringpero esto causa problemas en IE (error #1070 en jQuery)

// convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute( name, "" + value ); 

En la demostración, para cada fila, se evalúa el texto de cada celda. Si el texto está en blanco. string, luego se elimina la celda y se incrementa un contador. La primera celda de la fila que no tiene class="colTime" tiene un colspan attribute establecido en el valor del contador + 1 (para el lapso que ocupa).

Después de esto, para cada fila, el texto en la celda con class="colspans" se establece en el colspan attribute valores de cada celda en la fila de izquierda a derecha.

HTML

HTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









 

        

            
Time
            
Room 1
            
Room 2
            
Room 3
 
            
Colspans (L -> R)
        
        

            
09:00 – 10:00
            

            
Meeting 2
            

            
holder
        

        

            
10:00 – 10:45
            
Meeting 1
            
Meeting 2
            
Meeting 3
    
             
holder
 
        

        

            
11:00 – 11:45
            
Meeting 1
            
Meeting 2
            
Meeting 3
            
holder
     
        

        

            
11:00 – 11:45
            
Meeting 1
            
Meeting 2
            

            
holder
     
        

código jQuery

$(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(','));
  );

);

Esto es solo una demostración para demostrar que attr() se puede usar, pero para estar al tanto de su implementación y las peculiaridades de los navegadores cruzados que vienen con él. También hice algunas suposiciones sobre el diseño de su tabla en la demostración (es decir, aplique el colspan a la primera celda “sin tiempo” en cada fila), pero espero que entienda la idea.

He adaptado el script de Russ Cam (¡gracias, Russ Cam!) a mis propias necesidades: necesitaba fusionar las columnas que tenían el mismo valor, no solo las celdas vacías.

Esto podría ser útil para otra persona… Esto es lo que se me ocurrió:

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) );

  );

);

Debería eliminar por completo el elemento de celda de la tabla en blanco y cambiar el colspan attribute en otra celda de la fila para abarcar el espacio liberado, por ejemplo:

refToCellToRemove.remove();
refTocellToExpand.colspan = 4;

Tenga en cuenta que configurarlo a través de setAttribute (que de otro modo sería correcto) no funcionará correctamente en IE.

Cuidado: IE hace algunas cosas de diseño de tabla muy extrañas cuando juegas con colspans dinámicamente. Si puedes evitarlo, yo lo haría.

valoraciones y comentarios

Si haces scroll puedes encontrar las notas de otros administradores, tú todavía tienes la opción de dejar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador