根据标题文本更改列的背景颜色答案

【问题标题】：Change background color of column based on header text根据标题文本更改列的背景颜色
【发布时间】：2012-03-02 22:13:13
【问题描述】：

问题：如果标题td 中有特定文本，我需要更改整个列的背景颜色。我尝试了几种不同的方法，但都没有成功。

我尝试通过以下方式获取标题：

$('td:contains(Sun)').addClass('.weekend');

这甚至无法改变颜色。这就是我目前陷入困境的地方。

【问题讨论】：

愿意分享您的尝试吗？
只是证明标题 td 文本是否等于特定文本。然后根据需要更改背景颜色。你的问题到底在哪里？
你不需要javascript来完成这个..

标签： jquery css

【解决方案1】：

Fiddle

var txt = 'Header 2';
var column = $('table tr th').filter(function() {
    return $(this).text() === txt;
}).index();

if(column > -1) {
    $('table tr').each(function() {
        $(this).find('td').eq(column).css('background-color', '#eee');
    });
}

【讨论】：

【解决方案2】：

由于您没有提供很多详细信息，因此我不得不对您的尝试进行尝试，但是 here's a quick demo 我放在了 jsFiddle 上。它的要点是：

.selected {
    background-color: #ddd;
}

$('table th').click(function () {
    var index = parseInt($(this).index(), 10) + 1;
    $('.selected').removeClass('selected');
    $('table tbody tr :nth-child(' + index + ')').addClass('selected');
});

这将需要更新以评估所选 th 的文本，但也许它足以让你开始

【讨论】：

【解决方案3】：

像下面这样的东西可以解决问题，

DEMO

JS：

$('document').ready(function() {
    $('table thead th').click(function() {
        var colIndex = $(this).index();
        $('table tbody tr').each(function() {
            $(this).find('td').each(function(i) {
                if (i == colIndex) {
                    $(this).addClass('selCol');
                } else {
                    $(this).removeClass('selCol');
                }
            });
        });
    });
});

CSS：

.selCol { background-color: #c2c2c2; }

【讨论】：

【解决方案4】：

我的代码在这里：

<html>
 <head>
  <title></title>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $("table thead th").each(function(i,e){
     if($(e).text() == "Column2"){
      var ind = i + 1;
  $(e).css("background-color", "red")
  $('table tbody tr :nth-child(' + ind + ')').css("background-color", "red");
     }
    });
   });
  </script>
 <head>
 <body>
  <table>
   <thead>
    <tr>
     <th>Column1</th>
     <th>Column2</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Apple Inc</td>
     <td>AAPL</td>
    </tr>
    <tr>
     <td>GoogleInc</td>
     <td>GOOG</td>
    </tr>
   </tbody>
  </table>
  </body>
</html>

【讨论】：

【解决方案5】：

您可以使用table col。您应该根据服务器端标头的值更改样式属性。

jsfiddle

<table>
    <colgroup>
        <col />
        <col />
        <col />
        <col style="background-color:red" />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
            <th>Head 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 2</td>
            <td>Row 3</td>
            <td>Row 4</td>
            <td>Row 5</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 1</td>
            <td>Row 2</td>
            <td>Row 3</td>
            <td>Row 4</td>
            <td>Row 5</td>
            <td>Row 6</td>
        </tr>        
    </tbody>
</table>

此方法需要您在服务器端设置 col。

【讨论】：