Question

问题：如果标题td中有特定文字，我需要更改整列的背景颜色。我尝试了几种不同的运气方式。

我尝试使用以下标题获取标题：

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

这甚至无法改变颜色。那就是我现在被困住的地方。

Answer 1

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');
    });
}

Answer 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');
});

这需要更新以评估所选文本，但也许它足以让你入门

Answer 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; }

Answer 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>

Answer 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。

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

5 个答案: