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的数据表，但首先我需要弄清楚这一部分。

**** **** EDIT

arry变量当前取自其他内容的rel属性arry[0]是表id ..而arry[1]是此列中列的位置0-4 < / p>

Answer 1

我会使用<colgroup>为列着色，因为它可以快速轻松地操作。

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

一个例子，你可以把：

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

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

Answer 2

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 3

你可以给第1列中的每个元素赋予'c1'类，然后执行$（'。c1'）。css ...这样可以省去th / tr / td的区别。当然，你会为每一列都这样做。

顺便说一句，这是拼写'阵列'：）

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

3 个答案:

demo jsBin