在jQuery的數據表

我試圖設置特定TH背景顏色，但還沒有找到一種簡單的方法，在數據表的設置，要做到這一點設置背景特定列。我只使用表格的開始和結束標記。餘下的數據表。在jQuery的數據表

<table id="myTable"></table> 

<script type="text/javascript"> 
$(document).ready(function(){ 

    oTable = $("#myTable").dataTable({ 

     "aaData"  : myTableJsonData, //Working perfect 
     "bProcessing" : true, 
     "bJQueryUI" : true, 
     "sDom"  : "<'H'f>rt<'F'i>",  

     "aoColumnDefs" : [ 
      { "aTargets":[0], "mDataProp":"id", "sTitle":"ID" }, 
      { "aTargets":[1], "mDataProp":"name", "sTitle":"NAME", "sClass":"name" }, 
      { "aTargets":[2], "mDataProp":"city", "sTitle":"CITY" } 
     ]  
    }); 
}); 
</script>

屬性「sClass」不適合我的情況，因爲我不想改變所有的TD ..只有TH。我想喜歡簡單的東西：

// Not work because looks like it is overwritten by jquery UI theme 
$("#myTable").closest("thead").find(".name").addClass("bgGreen");

如果我設置這樣的事情，工作正常..但想避免這種情況。

<table id="myTable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th class="bgGreen"></th> 
      <th></th> 
     </tr> 
    </thead> 
</table>

感謝您的任何幫助！

來源

2012-07-29 Everton Z. P.

如果您已經知道列的索引（從我所能看到的數字2），則可以通過使用:nth-child()來選擇th來應用bgGreen類。（有other ways獲得的第n個元素的列表，這是一個例子。）

// Child column number known in advance (1-based) 
$("#myTable") 
    .find("thead th:nth-child(2)") 
    .addClass("bgGreen");

如果你不提前知道的列數，有辦法找到一個<td class="name">獲得數並找出它在哪一列。一個可能的解決方案可能包括在第一排一個簡單的循環中<tbody>並檢查name類。那麼這個數字可以用在上面的查詢中，或類似的東西。

來源

2012-07-29 18:09:48

您好喬爾！我將你的解決方案應用於一個HTML表格「正常」，並且工作正常，但是在我目前使用Datatables的情況下並不適用。它不工作，因爲顯然這''沒有在DOM中發現，同時正在通過與JSON數據API數據表生成的表。在這種情況下，爲什麼不能在一個[DataTable的回調（http://datatables.net/usage/運行'bgGreen'代碼： – 2012-07-29 18:41:06

使用數據表的「fnInitComplete」，仍然無法正常工作嘿嘿 – 2012-07-29 18:48:30

@EvertonZamignanPabon也試過回調）？ 'fnInitComplete'看起來合適，因爲它在獲取數據後運行。只需複製示例並替換警報即可。 – 2012-07-29 23:40:36

如果它僅僅是背景顏色爲什麼不使用

$("#myTable") 
    .find("thead th:nth-child(2)").css('background-color', 'green');

來源

2012-08-01 14:37:21 Dru

你可以用下面的JavaScript添加.bgGreen到第二<th>。 .bgGreen的CSS定義需要!impotant以防止默認主題覆蓋.bgGreen。你也可以使用直接的CSS3來完成相同的結果。

$('#myTable > thead > tr > th:nth-child(2)').addClass("bgGreen");

.bgGreen { 
    background : green !important; 
} 
#myTable > thead > tr > th:nth-child(2){ 
    background : green !important; 
}

來源

2013-12-18 19:42:59

在jQuery的數據表

回答

相關問題