jQuery 表格列/行隐藏或更改颜色

Question

现在我正在考虑一个想法，我想更改颜色（可能最终删除/隐藏）一列或一行数据现在我的目标是列。到目前为止，我已经部分工作但不完全

用这个：

$('#'+arry[0]+' tr td:eq('+arry[1]+')').css({"background-color":"FF0"});

我能够影响该列，但只能影响一行，而不是该列中的所有行，并且它似乎影响了“tbody”中的行/列，而不是“thead”或“tfoot”我需要影响所有 3.

我正在使用的表格示例如下：

<table id="testerTable">
    <thead>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
        <th>Fourth</th>
        <th>Fifth</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

我认为我的方法很简单，所以我需要一些想法。这最终将用于 datatables.net 中的数据表，但首先我需要弄清楚这部分。

****编辑****

arry 变量当前取自其他东西的 rel 属性arry[0] 是表 id.. 而arry[1] 是在这种情况下 0-4 列的位置

Answer 1

demo jsBin

var string= 'testerTable::2'; // your data // test with: 0,1,2,3,4
var arry= string.split('::'); // split to separate values

var $tr = $('#'+arry[0]+' tr');


$('#'+arry[0]+' th').eq(arry[1]).css({"background-color":"FF0"});

$tr.each(function(el){ // iterate through all 'tr' to find relative 'td' .eq()
  $(this).find('td').eq(arry[1]).css({"background-color":"FF0"});
});

Answer 2

我会使用<colgroup> 为列着色，因为它可以快速且易于操作。

http://www.w3schools.com/tags/tag_col.asp

举个例子，你可以说：

<colgroup>
  <col style="background-color:FF0" />
  <col span="4" />
</colgroup>

并使用 jquery 或其他方式编辑整个 colgroup。

Answer 3

您可以只为第 1 列中的每个元素指定类 'c1'，然后执行 $('.c1').css... 这样可以省去 th/tr/td 区别的麻烦。当然，你会为每一列都这样做。

顺便说一句，它的拼写是“数组”:)