[英]Highlight corresponding table <TD> cell based on row name and cell value
How would I go about highlighting a cell based on the row name and column value from the first column?我 go 如何根据第一列的行名和列值突出显示单元格? I have included a fiddle.我有一个小提琴。
$('tr').each(function() { var currentValue = $(this).find('th').text(); var currentValue2 = $(this).find('td').text(); if(('Value 1' == currentValue) && ('Value 1' == currentValue2)) { $(this).addClass('highlight'); } });
.highlight { background: #FFFF00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>test</th> <th>test2</th> </tr> <tr> <td>Value 1</td> <td>12</td> </tr> <tr> <td>Value 2</td> <td>0</td> </tr> </table>
http://jsfiddle.net/alsjka/entumojr/ http://jsfiddle.net/alsjka/entumojr/
that's a lot more complicated that what you wrote bro,这比你写的要复杂得多兄弟,
your algorithm is wrong for what you want you want this: if a heading has "One" text in it and the td has the same "One" text (or any desired text) you want to add highlight class to td你的算法对于你想要的是错误的你想要这个:如果标题中有“一个”文本并且 td 具有相同的“一个”文本(或任何所需的文本)你想添加突出显示 class 到 td
so your search should not begin from tr
elements, but from th
elements所以你的搜索不应该从tr
元素开始,而是从th
元素开始
and forEach th
elements you need to traverse all tr
elements looking for a td
having the same(or any desired) text和 forEach th
元素,您需要遍历所有tr
元素寻找具有相同(或任何所需)文本的td
i've changed your code a little and this is the result我稍微更改了您的代码,这就是结果
$('th').each(function(index,item) {
var currentValue = $(item).text();
$('tr').each(function(index,item){
var tdElements = $(item).find("td");
tdElements.each( function(index,item){
var currentValue2 = $(item).text();
if(('test' == currentValue) && ('Value 1' == currentValue2)) {
$(this).addClass('highlight');
$(this).next().addClass('highlight2')
}
})
})
});
http://jsfiddle.net/mahdiar_mansouri/txo2jpmq/11/ http://jsfiddle.net/mahdiar_mansouri/txo2jpmq/11/
========= =========
based on your new comment I think you want next element of the match to be selected so i've updated it a little, check out the fiddle for best result and see if it is what you wanted根据您的新评论,我认为您希望选择匹配项的下一个元素,所以我对其进行了一些更新,查看小提琴以获得最佳结果,看看它是否是您想要的
=========== ===========
UPDATED更新
based on your last comment You want corresponding TH and first TD of a row根据你最后的评论你想要相应的 TH 和一行的第一个 TD
This snippet can help you do that这个片段可以帮助你做到这一点
$('th').each(function(index,item) {
var currentValue = $(item).text();
$('tr').each(function(index2,item){
var tdElements = $(item).find("td");
if(tdElements.first().text() == "Value 2" && currentValue == 'test8' ){
tdElements.eq(index).addClass('highlight');
}
})
}); });
Here's the fiddle of it这是它的小提琴
http://jsfiddle.net/mahdiar_mansouri/06ygpzqd/3/ http://jsfiddle.net/mahdiar_mansouri/06ygpzqd/3/
I would like to contribute an answer to my OP.我想为我的 OP 提供一个答案。 Thanks for all answers and suggestions..感谢所有的答案和建议..
http://jsfiddle.net/alsjka/81sy27d4/88/ http://jsfiddle.net/alsjka/81sy27d4/88/
--Css to highlight table cell
.highlight {
background: green;
}
--find table header index by cell name using "TH"
var row = $("#tab").find("th:contains('tblh2')").closest('th').index();
--Find non header index by cell name using "TD"
var col = $("#tab").find("td:contains('tblh3')").closest('tr').index();
--Script to use the found indexes and highlight the cell
$('table tr:eq(' + row + ') td:eq(' + col + ')').addClass('highlight');
--Sample table
<table border="2" width="200" id="tab">
<tr>
<th></th>
<th>tblh1</th>
<th>tblh2</th>
<th>tblh3</th>
</tr>
<tr>
<td>tblh1</td>
<td>3</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td><span>tblh2</span></td>
<td>4</td>
<td>6</td>
<td>2</td>
</tr>
<tr>
<td>tblh3</td>
<td>5</td>
<td>2</td>
<td>4</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.