Javascript ~ add style to table

以前作管理頁面

為了方便表格的閱讀性

都會一格一格給他放不同的class

例如

如果全白就會很難看= =

以前的寫法是在PHP替tr標籤加class

反正就是種很原始的做法XD


現在我的作法是透過Javascript

在onload的時候做增加class的方法

function setTableGrey(){
    var i = 1;
    $('.list tr:gt(0):visible').each(function(){
        if(i ==1){
            i=0;
            $(this).addClass('grey');
        }else{
            i++;
            $(this).removeClass('grey');
        }
    });
}

這種作法的好處1是

所有管理畫面的表格都可以套用~~~~所以就不用再個別檔案用PHP寫程式處理

好處2是當表格有更動的時候

例如我做了一個filter的功能~~~~來顯示這種type的項目~~~隱藏非此type的項目

做完這動作就可能會出現連續兩條或以上的灰色項目~~~或是連續空白

如圖XD

可是在做完這動作之後在呼叫setTableGrey()

再替表格的class作reset就不會出現這問題

因為我裡面抓tr的方式是選有顯示的項目

$('.list tr:gt(0):visible')