突出显示具有不同值的表列td
Highlighting table column td with different values
我有一个显示日志的html <table>
,我想在整个表上循环,突出显示一行中具有不同值的任何相邻单元格<tr>
。
我正在尝试比较特定行中<td>
中的任意两个值。我已经设法做了一些事情,但只做了两个专栏。
下面是表结构的html示例代码:
<table id="coa_history_data">
<tr>
<th>old Name</th>
<th>New Name</th>
<th>Old Phone</th>
<th>New Phone</th>
<th>Old Age</th>
<th>New Age</th>
</tr>
<tbody>
<tr class="data-in-table">
<td>Alphy</td>
<td>Alphy</td>
<td>015</td> //should be highlited
<td>016</td> //should be highlited
<td>23</td> //should be highlited
<td>24</td> //should be highlited
</tr>
<tr>
<td>Tom</td>
<td>Tom</td>
<td>12</td>
<td>12</td>
<td>65</td> //should be highlited
<td>30</td> //should be highlited
</tr>
<tr>
<td>will</td>
<td>will</td>
<td>45</td>
<td>45</td>
<td>20</td>
<td>20</td>
</tr>
</tbody>
</table>
我的JavaScript代码:
$("#coa_history_data tbody tr.data-in-table").each(function() {
var $firstCell = $('td:eq(3)', this);
var $thirdCell = $('td:eq(4)', this);
if($firstCell.text() === $thirdCell.text()){
}else{
$firstCell.css('backgroundColor','yellow');
$thirdCell.css('backgroundColor','yellow');
}
});
我想要一些建议,如何处理?
为了独立于列的数量,我建议如下。
http://jsfiddle.net/hA5G8/
js
$("#coa_history_data tbody tr.data-in-table").each(function () {
$(this).find('td').each(function (index) {
var currentCell = $(this);
var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
currentCell.css('backgroundColor', 'yellow');
nextCell.css('backgroundColor', 'yellow');
}
});
});
html
<table id="coa_history_data">
<tr class="data-in-table">
<th>old Name</th>
<th>New Name</th>
<th>Old Phone</th>
<th>New Phone</th>
<th>Old Age</th>
<th>New Age</th>
</tr>
<tbody>
<tr class="data-in-table">
<td>Alphy</td>
<td>Alphy</td>
<td>015</td>//should be highlited
<td>016</td>//should be highlited
<td>23</td>//should be highlited
<td>24</td>//should be highlited</tr>
<tr class="data-in-table">
<td>Tom</td>
<td>Tom</td>
<td>12</td>
<td>12</td>
<td>65</td>//should be highlited
<td>30</td>//should be highlited</tr>
<tr class="data-in-table">
<td>will</td>
<td>will</td>
<td>45</td>
<td>45</td>
<td>20</td>
<td>20</td>
</tr>
</tbody>
</table>
下面是我的解决方案:
<table id="coa_history_data">
<tr>
<th>old Name</th>
<th>New Name</th>
<th>Old Phone</th>
<th>New Phone</th>
<th>Old Age</th>
<th>New Age</th>
</tr>
<tbody>
<tr class="data-in-table">
<td>Alphy</td>
<td>Alphy</td>
<td>015</td>
<td>016</td>
<td>23</td>
<td>24</td>
</tr>
<tr class="data-in-table">
<td>Tom</td>
<td>Tom</td>
<td>12</td>
<td>12</td>
<td>65</td>
<td>30</td>
</tr>
<tr class="data-in-table">
<td>will</td>
<td>will</td>
<td>45</td>
<td>45</td>
<td>20</td>
<td>20</td>
</tr>
</tbody>
</table>
JScript:
$("#coa_history_data tbody tr.data-in-table").each(function() {
var $firstCell = $('td:eq(2)', this);
var $secondCell = $('td:eq(3)', this);
var $thirdCell = $('td:eq(4)', this);
var $fourthCell = $('td:eq(5)', this);
if($firstCell.text() != $secondCell.text()){
$firstCell.css('backgroundColor','yellow');
$secondCell.css('backgroundColor','yellow');
}
if($thirdCell.text() != $fourthCell.text()){
$thirdCell.css('backgroundColor','orange');
$fourthCell.css('backgroundColor','orange');
}
});
小提琴:http://jsfiddle.net/3CdyH/
好的,现在我明白了,您想突出显示特定字段<td>
。
更好的解决方案是在创建表时执行
我确信这种方法的性能更好,我在JsPerf 中进行了测试
因此,以这种方式创建表格:
重要信息:当然,您会有普通值,所以将其放在<td>
的值变量上。
var content = [];
for (var i=0; i < len; i++){
if (i==0) //i dont know what is your condition to the tr be 'data-in-table' so change if needs
class = "data-in-table";
content.push("<tr class='"+class+"'> "+
"<td>will</td> "+
"<td>will</td> "+
"<td>"+value+"</td> "+
"<td>"+value+"</td> "+
"<td class=hlight>"+value+"</td>"+
"<td class=hlight>"+value+"</td>"+
"</tr>");
}
document.getElementById('your_table_wrapper').innerHTML = "<table id=coa_history_data>"+
"<tr> "+
"<th>old Name</th> "+
"<th>New Name</th> "+
"<th>Old Phone</th> "+
"<th>New Phone</th> "+
"<th>Old Age</th> "+
"<th>New Age</th> "+
"</tr> "+
"<tbody> "+
content.join('')+
"</tbody> "+
"</table>;
使用这个CSS:
.hlight {
background-color: yellow;
}
相关文章:
- 单击时如何突出显示表TD
- 突出显示具有不同值的表列td
- this.value在<td>标记显示未定义
- JSON数组转换为HTML表,并在td标记中显示数据
- 如何在td中显示从数据库中检索数据而不刷新
- 如何找到td类并检查它是否包含类,然后我需要显示弹出窗口
- 如何使用JS或JQuery使工具提示显示在TD悬停上
- 我想在 td 的值发生变化时更改突出显示的 td
- 如何从 td 标签中获取值并在 php 中另一个页面的文本框中显示此值
- 对象 对象显示在 td 中
- 双击 td 时,如何在警告框中将数据库中的数据显示为 html 表
- 成功后如何使用AJAX在TD中显示值和图像
- 在 jquery 中显示和隐藏 td
- 如何使用列值和行值突出显示/着色表 td
- 无法在表的悬停td元素上显示Popover
- 如何从td中删除显示的值并替换为输入字段
- 使用javascript显示多个选定的td值
- 过滤tr out中未显示的td元素
- 收缩td表中的文本,使其适合大小.逐渐在调整大小列上显示文本
- 悬停时以 td 显示图像