necesita asesoramiento con tabla HTML

Question

Quisiera codificar una tabla HTML con mensajes como este:

alt text http://img717.yfrog.com/img717/4348/tableo.png

La tabla contendrá los mensajes que se distribuyen en las primeras columnas N (N puede cambiar). Llamemos estas N columnas, el área del mensaje. Cada mensaje se encuentra en X celdas contiguas en el área de mensaje. X también puede cambiar.

Cada mensaje tiene un nombre que contiene palabras separadas con guiones bajos.

¿Cómo recomendaría para codificar esta tabla en Javascript/jQuery tal que:

• Sería fácil definir un mensaje (iniciar celular, celular final, color, nombre)
• El nombre se romper solo después de subrayados (en lugar de en medio de la palabra)

Answer 1

Numere las celdas de forma lineal, convierta a filas/columnas, establezca el fondo y los bordes de cada celda dentro del rango ... no es demasiado difícil.

El truco es insertar el texto en la parte superior al tener el desbordamiento de contenido de una celda de la celda, dado que el desbordamiento de la tabla de IE se corta a bits.

Esto es lo que tengo que parece funcionar ... contiene hacks para IE7, pero no lo he probado en IE6, así que quién sabe qué va a pasar.

<style type="text/css"> 
    #t { table-layout: fixed; width: 50%; border-collapse: collapse; } 
    #t td { border: solid black 1px; height: 1.2em; overflow: visible; } 
    #t .message { text-align: center; } 

    /* these styles fix ie bugs */ 
    #t .message { position: relative; } 
    #t .message div { position: absolute; top: 0; left: 0; width: 100%; } 
</style> 

<table id="t"> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
</table> 

<script type="text/javascript"> 
    var t= new MessageTable(document.getElementById('t'), 3); 
    t.addMessage('SHORT_MESSAGE', 4, 16, 'yellow'); 
    t.addMessage('VERY_VERY_LONG_MESSAGE', 20, 14, 'cyan'); 

    function MessageTable(element, width) { 
     return {addMessage: function(text, c, n, color) { 
      // add zero-width spaces for breaking 
      text= text.replace(/_/g, '_\u200B'); 

      // set background and borders 
      for (var i= c; i<c+n; i++) { 
       var x= i%width, y= Math.floor(i/width); 
       var style= element.rows[y].cells[x].style; 
       style.backgroundColor= color; 
       style.borderLeftStyle= (i===c || x===0)? 'solid' : 'none'; 
       style.borderRightStyle= (i===c+n-1 || x===width-1)? 'solid' : 'none'; 
       style.borderTopStyle= i-c<width? 'solid' : 'none'; 
       style.borderBottomStyle= c+n-i<width? 'solid' : 'none'; 
      } 

      // add message to overflowing cell in first full row 
      // The do-nothing inner div is required for IE (again. bah) 
      var message= document.createElement('div'); 
      var inner= document.createElement('div'); 
      message.className= 'message'; 
      message.style.width= width+'00%'; 
      message.appendChild(inner); 
      inner.appendChild(document.createTextNode(text)); 
      element.rows[Math.ceil(c/width)].cells[0].appendChild(message); 
     }}; 
    } 
</script>