根據列標題文本在列中選擇表格單元

Question

如何使用Javascript或jQuery根據表格列標題中寫入的文本（例如「狀態」）來選擇列中的單元格？

（詳細信息，不是問題的一部分：我想稍後使用此方法根據單元格內容將該背景顏色應用於該列中的單元格，以便例如'Error'將使背景顏色爲紅色和 '質量好' 是白色的。）

Answer 1

這裏是一個快速撥弄我爲你..

http://jsfiddle.net/N2CHt/2/

HTML

<table> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
     <th>Status</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>Bad</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
     <td>Good</td> 
    </tr> 
</table> 

JQUERY

$(function(){ 
    var columnindex = $('th:contains("Status")').index(); 
    if(columnindex != -1) 
    { 
     $('tr').each(function(){ 
      var column = $('td', this).eq(columnindex); 

      switch(column.text()) 
      { 
       case "Bad": 
        column.css({ backgroundColor: '#900' }); 
        break; 

       case "Good": 
        column.css({ backgroundColor: '#090' }); 
        break; 

       default: 

        break; 

      } 
     }); 
    } 
}); 

您可以更改顏色和什麼文本您正在尋找，但你應該能夠得到的怎麼回事要旨...

基本上，我們使用contains選擇（https://api.jquery.com/contains-selector/） yp找到包含我們正在查找的文本的th，然後找到.index()（http://api.jquery.com/index/）以獲取列索引。然後我們使用.each（https://api.jquery.com/jQuery.each/）循環tr並使用eq（https://api.jquery.com/eq/）獲取該項目。然後操作td的css並設置其背景顏色屬性。

有一點需要注意的是，如果2列th文本包含「狀態」，您將面臨問題！