Question

对于jQuery插件，我需要向表列添加/删除类。为此，我想将每个表列（多个<td>）保存在其一个变量中一次。该表的HTML看起来或多或少如下：

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
</table>

最后我想要一个像$tableColumn[]之类的数组，以便我可以使用$tableColumn[ 0 ].addClass('test');向第一列添加一个类。

我可以遍历每个<tr>和<td>，但我不确定如何将多个td添加到同一个变量中？还有其他更好的（例如更好的表现）方式吗？

var $tableColumn = [];

$('table tr').each(function() {
    // Loop through all rows
    $( this ).find('td').each(function( idx ) {
        // If I do something like this, there's only one td in my array
        // Probably there is a better way to do this without needing to have two 'each' functions
        $tableColumn[ idx ] = $( this );
    });
});

Answer 1

首先，为什么有两张桌子？您不需要为每一行都有一个表格标记。

对于你的问题，既然你使用jquery，你可以尝试这样的事情:(通过使用CSS3选择器）

$('table tr td:nth-child(' +columnNumber +')').addClass( className )

nth-child选择器将有效地选择每行（tr）的columnNumber子节点，因此$('table tr td:nth-child(columnNumber)')获取表的columnNumber-th列。

jsBin：http://jsbin.com/qisosado/2/edit?html,css,js,output

Answer 2

您可以使用nth-child创建一个jQuery选择数组。

var i,
    columns = [],
    nColumns = $('table tr:first td').length;

for(i = 1; i <= nColumns; i ++) {
    columns.push($('td:nth-child(' + i + ')'));
}

columns[0].addClass('a');
columns[1].addClass('b');

http://jsfiddle.net/gb0y0y6g/

或者，请查看col tag。

Answer 3

我为你创造了一个jsfiddle ..

行中单列的

： - 代码： -

var tableColumn = [];
$(document).ready(function() {
    $('table tr td').each(function() {
        tableColumn.push($(this));
    });
    //access the td from the array
    tableColumn[0].addClass("yellow")

});

工作示例： - http://jsfiddle.net/zoohcveh/12/

行中所有列的

： -

代码： -

var tableColumn = [];
$(document).ready(function() {
    $('table tr').each(function() {
        tableColumn.push($(this));
    });
    //access all the td from the array
    tableColumn[0].addClass("yellow")

});

工作示例： - http://jsfiddle.net/zoohcveh/13/ 感谢

Answer 4

如果您尝试执行列特定的操作，则可以使用列组，例如更改列中每个单元格的背景颜色。

您还可以使用jQuery选择器从集合中获取特定的单元格组。

jsbin：http://jsfiddle.net/pqm2gbqz/

HTML：

<button>Toggle</button>
<table>
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
    <tbody>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td>Column 1 row 2</td>
        <td>Column 2 row 2</td>
        <td>Column 3 row 2</td>
    </tr>
    </tbody>
</table>

JS：

var colgroup = document.querySelectorAll('col'),
    button = document.querySelector('button'),
    $tds = $("table").find("td")
;


button.addEventListener('click', function(e) {
    e.preventDefault();

    colgroup.item(0).classList.toggle('some-class');

    $tds.filter(":last-of-type").toggleClass('hide');
});

CSS：

.some-class {
    background: green;
}

.hide {
    display: none;
}

将每个表列保存在变量中

4 个答案: