繁体   English   中英

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

[英]Select table cells in a column based on the column header text

如何根据表列标题中的文本选择列中的单元格,例如“状态”,使用JavascriptjQuery

(细节,不是问题的一部分:我想稍后使用它根据单元格内容将背景颜色应用于该列中的单元格,以便例如“错误”将背景颜色变为红色并且'质量正常“会是白色的。”

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

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/ )YP找到th包含我们正在寻找的文本,然后.index() http://api.jquery.com / index / )获取列索引。 然后我们使用.eachhttps://api.jquery.com/jQuery.each/ )循环tr,并使用eqhttps://api.jquery.com/eq/ )获取项目。 然后操纵td的css并设置其背景颜色属性。

有一点需要注意的是,如果2列th文本包含“状态”,你将面对的问题!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM