如何根据在表列标题中写入的文本(例如,使用Javascript
或jQuery
)选择列中的单元格
(详细信息,而不是问题的一部分:我希望稍后使用它来根据单元格内容对该列中的单元格应用背景颜色,例如,“Error”将得到背景颜色红色,“Quality”将为白色)。
发布于 2014-03-12 10:59:56
这是我为你做的一个快速的小提琴。
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/)获取列索引。然后,我们使用.each
(https://api.jquery.com/jQuery.each/)循环tr,并使用eq
(https://api.jquery.com/eq/)获取条目。然后,为td
操作css并设置其背景颜色属性。
需要注意的一点是,如果2列th
文本包含“状态”,您将面临问题!
https://stackoverflow.com/questions/22348971
复制相似问题