2014-03-12 61 views
0

如何使用JavascriptjQuery根据表格列标题中写入的文本(例如“状态”)来选择列中的单元格?根据列标题文本在列中选择表格单元

(详细信息,不是问题的一部分:我想稍后使用此方法根据单元格内容将该背景颜色应用于该列中的单元格,以便例如'Error'将使背景颜色为红色和 '质量好' 是白色的。)

+2

提供您的html的示例代码? –

+0

jQuery'contains()' - https://api.jquery.com/contains-selector/ - 是为$'(“th:contains('Status')”).jquerymethod(...' –

+0

在Adween的回答下面的示例html代码看起来不错。 – tomsv

回答

3

这里是一个快速拨弄我为你..

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/)以获取列索引。然后我们使用.eachhttps://api.jquery.com/jQuery.each/)循环tr并使用eqhttps://api.jquery.com/eq/)获取该项目。然后操作td的css并设置其背景颜色属性。

有一点需要注意的是,如果2列th文本包含“状态”,您将面临问题!

相关问题