javascript - Table column styling with jquery -
i have table on website , trying style jquery. code using works fine normal table if in column 2 cells merged destroys style. want 1 column coloured , 1 column blank
jquery code
$( document ).ready(function() { $('#tab-table').find("table").addclass('s-table'); $(".s-table tr td:nth-child(2n+1)").css("background-color","#d1deec"); });
i'd use loop (if merged cells stay same..
see fiddle: http://jsfiddle.net/jfit/k5yz9/4/
$("table tr:not(:first)").each(function() { if($(this).find('td').length == 7) { //can replace 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 });
update
http://jsfiddle.net/jfit/k5yz9/6/
using array:
$("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"); }); });
Comments
Post a Comment