高亮数据作为jquery ui中的范围滑块
高亮数据作为jquery ui中的范围滑块
提问于 2012-03-01 15:29:32
我之前的问题是根据每个滑块的单个值突出显示列
Search specific column of table for highlight table data
现在我有滑块的范围像从4-8它应该突出显示。下面是相同的代码。
jQuery( "#svoltage-range" ).slider({
orientation: "vertical",
range:true,
min: 2,
max: 20,
values: [ 2, 20 ],
slide: function( event, ui ) {
//jQuery( "#amount5" ).val( ui.value );
jQuery( "#amount5" ).text( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
var columnCol = jQuery("#amount5").parent().prevAll().length;
// jQuery('#tableData tr.data').hide();
console.log("low value-->" + ui.values[ 0 ]);
console.log("high value-->" + ui.values[ 1 ]);
// remove Classes
jQuery('#tableData tr.data').each(function() {
jQuery(this).find('td:eq('+columnCol+')').removeClass("jquery-colorBG-highLight"); // add
});
jQuery('#tableData tr').each(function() {
var highlightTD_1 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
return jQuery(this).text() >= ui.values[ 0 ];
});
highlightTD_1.addClass("jquery-colorBG-highLight");
var highlightTD_2 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
return jQuery(this).text() <= ui.values[ 1 ];
});
highlightTD_2.addClass("jquery-colorBG-highLight");
//highlightTD.parent().show();
});
}
});但可能会有一些问题，即它会突出显示所有字段。如何只高亮显示落入范围内的TD。
Live URL
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-03-01 15:54:15
你的代码取所有值大于最小值的td和小于最大值的td，这意味着td。
更改此代码：
// remove Classes
jQuery('#tableData tr.data').each(function() {
jQuery(this).find('td:eq('+columnCol+')').removeClass("jquery-colorBG-highLight");
});
//add classes
jQuery('#tableData tr').each(function() {
var highlightTD_1 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
return jQuery(this).text() >= ui.values[ 0 ] && jQuery(this).text() <= ui.values[ 1 ];
});
highlightTD_1.addClass("jquery-colorBG-highLight");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9512244
复制相关文章
相似问题
腾讯云开发者
