jQuery的表列造型

-1

我在我的網站上有一個表，我試圖用jquery來設計它。我正在使用的代碼正常工作表正常，但如果在列中兩個單元格合併它破壞了風格。我想1列進行着色和一列空白jQuery的表列造型

jQuery代碼

$(document).ready(function() { 
    $('#tab-table').find("table").addClass('s-table'); 
    $(".s-table tr td:nth-child(2n+1)").css("background-color","#d1deec"); 
});

link to fiddle

來源

2014-03-24 Umar Khan

你爲什麼用jQuery的造型，而不是CSS？ – Albzi

由於我使用的是CMS，並且網站上有很多表格用css來設計它，所以我需要使用很多我不想要的類，所以我試圖讓它變成動態的，所以如果添加了新表格，風格自動。我希望這是有道理的 –

是的，但你可以在CSS中做到這一點？ – Albzi

我會使用一個循環（如果合併單元格將始終保持不變..

看到小提琴： http://jsfiddle.net/jFIT/k5yZ9/4/

$("table tr:not(:first)").each(function() { 
if($(this).find('td').length == 7) 
{ 
    //can replace with array 2/4/6 
    $(this).find('td:nth-child(2)').css("background-color","#d1deec"); 
} 
else 
{ 
    // 3/5/7 
$(this).find('td:nth-child(3)').css("background-color","#d1deec"); 
} 
//loop array 
});

更新

http://jsfiddle.net/jFIT/k5yZ9/6/

使用數組：

$("table tr:not(:first)").each(function() { 
var arr = []; 
var $this = $(this); 
if ($(this).find('td').length == 7) { 
    arr.push(2, 4, 6); 
} else { 
    arr.push(3, 5, 7); 
} 
$.each(arr, function (ind, val) { 
    $this.find('td:nth-child(' + val + ')').css("background-color", "#d1deec"); 
}); 
});

來源

2014-03-24 10:54:55

非常感謝，它像一個魅力:) –

基本的CSS也可以很容易地工作，如果你使用colgroup/col標記:) –

@UmarKhan沒問題 - 只是疲倦，如果列和分組改變你需要重新訪問這些代碼。 –

CSS可以幫助您繪製Colonnes酒店爲背景的顏色，如果你使用正確的標記：

<colgroup> 
<col/> 
<col/> 
</colgroup>

然後basicly適用：

col {background:#789 url(image.png);}

混合背景的關口，和RGBA顏色的細胞可以給你這個：http://codepen.io/gc-nomade/pen/ybDhH/

另外，如果你沒有手的標記，誘騙和頭細胞做。您可以使用box-shadow或pseudo-element從標題單元格和overflowtable一些技巧。 Pseudo-element TECHNIC： http://codepen.io/gc-nomade/pen/dDwmf

和box-shadow工藝：http://codepen.io/gc-nomade/pen/xqALu

來源

2014-03-24 11:45:11

嗨你可以在小提琴中展示這個嗎？對此非常感興趣。 –

是的，我應該用一開始呢？ –

只是最基本的，我知道你將需要改變標記，但也許把它扔進我們正在從OP上面的小提琴.. http://jsfiddle.net/jFIT/k5yZ9/4/ –

jQuery的表列造型

回答

相關問題