根据列标题文本选择列中的表格单元格答案

【问题标题】：Select table cells in a column based on the column header text根据列标题文本选择列中的表格单元格
【发布时间】：2014-03-12 10:43:08
【问题描述】：

如何使用Javascript 或jQuery，根据表格列标题中写入的文本（例如“状态”）选择列中的单元格？

（详细信息，不是问题的一部分：我想稍后使用它根据单元格内容将背景颜色应用于该列中的单元格，例如，“错误”会使背景颜色变为红色，并且“质量OK”是白色的。）

【问题讨论】：

提供你的html的示例代码？
jQuery contains() - api.jquery.com/contains-selector - 专为 $( "th:contains('Status')" ).jquerymethod(... 设计
下面 Adween 的回答中的示例 html 代码看起来不错。

标签： javascript jquery jquery-selectors

【解决方案1】：

这是我为你做的一个快速的小提琴..

http://jsfiddle.net/N2CHt/2/

HTML

<table>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>Bad</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>Good</td>
    </tr>
</table>

JQUERY

$(function(){
    var columnindex = $('th:contains("Status")').index();
    if(columnindex != -1)
    {
        $('tr').each(function(){
            var column = $('td', this).eq(columnindex);

            switch(column.text())
            {
                case "Bad":
                    column.css({ backgroundColor: '#900' });
                    break;

                case "Good":
                    column.css({ backgroundColor: '#090' });
                    break;

                default:

                    break;

            }
        });
    }
});

您可以更改颜色和要搜索的文本，但您应该能够大致了解正在发生的事情...

基本上我们使用contains 选择器（https://api.jquery.com/contains-selector/）找到包含我们要查找的文本的th，然后.index()（http://api.jquery.com/index/）获取列索引。然后我们使用.each (https://api.jquery.com/jQuery.each/) 循环tr，并使用eq (https://api.jquery.com/eq/) 抓取项目。然后操作 td 的 css 并设置其背景颜色属性。

需要注意的是，如果 2 列 th 文本包含“状态”，您将面临问题！

【讨论】：