Cần tư vấn với bảng HTML

Question

Tôi muốn mã hóa một bảng HTML với những thông điệp như thế này:

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

Bảng sẽ chứa thông điệp rằng sẽ trải rộng trên N cột đầu tiên (N có thể thay đổi). Cho phép gọi các cột N này, vùng thông báo. Mỗi tin nhắn nằm trên X ô liền kề trong vùng tin nhắn. X cũng có thể thay đổi.

Mỗi thư có tên chứa các từ được phân tách bằng dấu gạch dưới.

Làm thế nào bạn muốn giới thiệu mã bảng này trong Javascript/jQuery như vậy:

• Nó sẽ được dễ dàng để xác định một thông điệp (bắt đầu di động, di động kết thúc, màu sắc, tên)
• Tên sẽ chỉ phá vỡ sau khi gạch dưới (thay vì ở giữa từ)

Answer 1

Số ô tuyến tính, chuyển đổi thành hàng/cột, đặt nền và đường viền của mỗi ô trong phạm vi ... không quá khó.

Bit phức tạp đang chèn văn bản lên trên cùng bằng cách tràn nội dung của ô từ ô, do lỗi tràn của bảng IE bị lỗi.

Đây là những gì tôi đã có mà dường như làm việc ... nó chứa hack cho IE7, nhưng tôi đã không thử nghiệm nó trên IE6 để những người hiểu biết những gì sẽ xảy ra.

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