besoin des conseils HTML Table

Question

Je voudrais coder un tableau HTML avec des messages comme celui-ci:

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

Le tableau contiendra des messages qui se répandra sur premières colonnes N (N peut changer). Appelons ces N colonnes, la zone de message. Chaque message est situé sur X cellules contiguës dans la zone de message. X peut aussi changer.

Chaque message a un nom qui contient des mots séparés par des traits de soulignement.

Comment recommanderiez-vous de coder ce tableau en Javascript/jQuery tel que:

• Il serait facile de définir un message (cellule de début, cellule de fin, couleur, nom)
• Le nom casser seulement après des traits de soulignement (plutôt qu'au milieu du mot)

Answer 1

Numérotez les cellules linéairement, convertissez en rangée/colonne, placez l'arrière-plan et les frontières de chaque cellule dans l'intervalle ... pas trop difficile. Le bit délicat consiste à insérer le texte par-dessus en provoquant un débordement de contenu d'une cellule à partir de la cellule, étant donné que le dépassement de la table d'IE est mis en bogues.

Voici ce que j'ai qui semble fonctionner ... il contient des hacks pour IE7, mais je ne l'ai pas testé sur IE6 donc qui sait ce qui va se passer.

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