2012-06-20 32 views
15

¿Hay alguna forma de determinar o calcular si se puede normalizar una tabla HTML utilizando filas? O si hay una biblioteca de JavaScript que puede hacerlo.Tabla HTML "normalizar" con rowspan

Por ejemplo, esta tabla:

+-----------+---------+ 
| Apple  | Red  | 
| Apple  | Green | 
| Apple  | Yellow | 
| Sun  | Yellow | 
| Sun  | Hot  | 
| Charizard | Hot  | 
| Charizard | Pokémon | 
+-----------+---------+ 

se convertiría en esto:

+-----------+---------+ 
| Apple  | Red  | 
|   | Green | 
|   |---------| 
|-----------| Yellow | 
| Sun  |-------- | 
|-----------| Hot  | 
|   |---------| 
| Charizard | Pokémon | 
+-----------+---------+ 

Mira esta violín a ver lo que quiero decir: http://jsfiddle.net/scorch/LZKkQ/

Algunas de estas combinaciones son fáciles averiguarlo manualmente, pero algunos pueden ser bastante complejos. Me gustaría minimizar la tabla tanto como sea posible, y me aseguro de que no haya otra combinación que pueda minimizarla aún más. Es decir, preferiblemente solo valores únicos en la tabla.

EDIT: No importa la columna extra en el violín. Parece que firefox tiene algunos problemas con rowspan en la columna de la derecha, así que tuve que agregar otro para que tenga el efecto deseado.

EDIT 2:

Las tablas de datos Plugin fnMultiRowspan y fnFakeRowspan se menciona más adelante en realidad no obtener los resultados deseados. Ambos complementos necesitan que la tabla se ordene de la manera correcta antes de que funcione; fnFakeRowspan sólo funciona en una columna y fnMultiRowspan da el resultado a continuación (de agua caliente y amarillo están duplicados en la segunda columna):

+-----------+---------+ 
|   | Red  | 
| Apple  | Green | 
|   | Yellow | 
|-----------+---------| 
| Charizard | Hot  | 
|   | Pokémon | 
|-----------+---------| 
| Sun  | Yellow | 
|   | Hot  | 
+-----------+---------+ 
+4

has necesitado escribir usted mismo? –

+1

Sí, hay una biblioteca jquery [Datatable] (http://datatables.net) que tenía esta característica, vea esto: [Agrupación visual de dos o más celdas seguidas con el mismo contenido] (http://datatables.net)/plug-ins/api # fnFakeRowspan) –

+0

He intentado encontrar una forma matemática de hacerlo, pero parece que no puedo encontrar una manera de hacer una ecuación. – Oscar

Respuesta

1

Como se mencionó anteriormente @MahmoudGamal en los comentarios, no hay plug-in para jQuery llamado DataTables que puede ser útil. Salida la función fnFakeRowspan:

Crea células rowspan en una columna cuando hay dos o más celdas de una fila con el mismo contenido, agrupando efectivamente juntos visualmente. Nota: este complemento actualmente solo funciona correctamente con el procesamiento del lado del servidor.

Sobre la base de una lectura de código rápida, parece que se especifica una columna, entonces busca duplicados, y combina las células, según sea necesario. (Nota: no he probado este código por mi cuenta.)

+0

Hm, se acerca a la mitad. Lo probé, y solo admitía hacerlo en una columna, no en varias. Y también la tabla debe ordenarse en el orden exacto correcto de antemano para que funcione. Hubo algunas variaciones del complemento en los foros, pero ninguno realmente funcionó. Sin embargo, gracias de todos modos, podría echarle un vistazo y ver si puedo lograr que haga lo que quiero con algunas modificaciones. – Oscar

+0

NO, es compatible con múltiples columnas. pero tienes que llamar a 'fnFakeRowspan()' una vez más. –

0

, sería sencillo escribirlo usted mismo si comprende JavaScript lo suficiente. Todo lo que necesita hacer es verificar si la siguiente cadena es la misma que la cadena actual y luego simplemente aumentar la altura de uno en lugar de imprimirlo dos veces.

Editar: Así que te gustaría que termine como

+-----------+---------+ 
| Apple  | Red  | 
| Pokémon | Green | 
| Sun  | Yellow | 
| Charizard | Hot  | 
+-----------+---------+ 
+0

Bueno, también tiene que ser primero sortet. Y no solo 'column1 asc, column2 asc', porque esa podría no ser la forma óptima de organizarlo (como en la tabla de ejemplo anterior), ya que la segunda columna también necesita estar alineada. Se podría hacer una disposición más óptima moviendo las filas después de una clasificación inicial. – Oscar

+0

Comprobar mi respuesta editar –

+0

No realmente. Verifique la tabla "Sería convertido en esto:" en la pregunta. – Oscar