이 같은 메시지를 HTML 테이블을 코드에 HTML 테이블

Question

와 조언을 내가 좋아하는 것이 필요 : 표는 (N은 변경 될 수 있습니다) 첫 번째 N 열을 통해 확산됩니다 메시지를 포함

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

. 메시지 영역 인 N 개의 열을 호출 할 수 있습니다. 각 메시지는 메시지 영역에있는 X 인접 셀 에 있습니다. X가 변경 될 수도 있습니다.

각 메시지에는 밑줄로 분리 된 단어가 포함 된 이름이 있습니다. 당신이 자바 스크립트/jQuery를이 테이블을 코딩하는 추천 방법

같은 것을 :

• (셀, 최종 전지, 색상, 이름 시작)
• 이름은하는 메시지를 정의하기 쉬울 것이다 (단어 중간이 아니라) 밑줄 뒤에 만 나옵니다.

Answer 1

셀을 선형으로 번호를 매기고 행/열로 변환하고 범위 내의 각 셀의 배경과 테두리를 설정합니다. 그리 그리 어렵지 않습니다.

까다로운 비트는 셀의 내용이 셀에서 오버플로되도록하여 텍스트를 맨 위에 삽입합니다. IE의 테이블 오버플로가 비트에 도청된다는 점을 감안할 때.

다음은 IE7에 대한 해킹이 포함되어 있지만 작동하지 않는 IE6에서 테스트 한 결과입니다.

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