在html5中構建表格

Question

我需要在HTML5中構建表格。 表的要求是：

1. 允許摺疊/展開

2. 高亮選中的行

3. Moues懸停改變

什麼是bulid表的最佳途徑？ （這意味着它會對用戶看起來很好）

我需要在jQuery中使用嗎？

HTML5中的表格有什麼特別之處嗎？

Answer 1

儘管它不是100％必需的，但我會使用jQuery來簡化和簡化跨瀏覽器的兼容性。

爲了讓您的行展開和摺疊，您需要設置表格，以便每行都有一行下面有一行，通過單擊上面的行可以是toggled (hidden/shown)。

快速搜索引起a little jquery plugin that has done this already。即使你不使用它，它也可能是一個很好的例子。

單元格高亮可以在jQuery中完成。 只需使它具有您想要的CSS屬性when a cell is clicked它adds a class to it。

$("td").toggle(function() { 
    $(this).addClass("highlight-clicked"); 
}, function() { 
    $(this).removeClass("highlight-clicked"); 
}); 

Mouseover events can be done in jQuery too。非常類似於上面的代碼。

$("td").hover(function() { 
    $(this).addClass("highlight-hover"); 
}, function() { 
    $(this).removeClass("highlight-hover"); 
}); 

爲了更好地展示，here's a little jsfiddle I whipped up

Answer 2

<input type="button" id="btnExpCol" value="Collapse" /> 
    <div id="divTest"> 
     <table id="tblTest"> 
      <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
      </tr> 
      <tr class="Highlight"> 
       <td>Peter</td> 
       <td>Griffin</td> 
      </tr> 
      <tr class="Highlight"> 
       <td>Lois</td> 
       <td>Griffin</td> 
      </tr> 
     </table> 
    </div> 

// ============================= ================== //

$(document).ready(function() { 
     //$('body').html('<table id="tblTest"><tr><th>Firstname</th><th>Lastname</th></tr><tr class="Highlight"><td>Peter</td><td>Griffin</td></tr><tr class="Highlight"><td>Lois</td><td>Griffin</td></tr></table>'); 

     $('#btnExpCol').click(function() { 
      if ($(this).val() == 'Collapse') { 
       $('#divTest').stop().slideUp('3000'); 
       $(this).val('Expand'); 
      } else { 
       $('#divTest').stop().slideDown('3000'); 
       $(this).val('Collapse'); 
      } 
     }); 

     //$('#tblTest').find('.Highlight').live('click', function() { 
     // $(this).toggleClass('Red'); 
     //}); 

     $('#tblTest').find('.Highlight').click(function() { 
      $(this).toggleClass('Red'); 
     }); 

     $('#tblTest').find('.Highlight').live({ 
      mouseenter: function() { 
       $(this).addClass('Blue'); 
      }, 
      mouseleave: function() { 
       $(this).removeClass('Blue'); 
      } 
     }); 
    }); 

Demo