具有多个范围滑块的 Jquery 过滤器表答案

【问题标题】：Jquery filter table with multiple range sliders具有多个范围滑块的 Jquery 过滤器表
【发布时间】：2015-03-12 12:23:18
【问题描述】：

前几天我问了几乎同样的问题

Jquery slider range: apply range as a filter on table rows

我得到了一个快速而好的答案，我认为我可以自己更改它以使其接受多个范围滑块并过滤它们。我试着写一个这样的函数：

function slide(){
    var table = document.getElementById("ADC_DAC");
    for (var i = 1, row; row = table.rows[i]; i++) {
       //iterate through rows (we SKIP the first row: counter starts at 1!)
       for (var j = 0, col; col = row.cells[j]; j++) {
           //iterate through columns: if first column not in range: HIDE, else SHOW

            //if (j == 0) {             // if first column
            if ($(col).html() >= indexmin && $(col).html() <= indexmax && j == 0) {
            // if in interval
                $(row).show();
            } else if ($(col).html() >= minvoltmin && $(col).html() <= minvoltmax && j == 7){
                if (j==7) {
                    $(row).show();
                }
            }else{
                $(row).hide();
            }
        }  
    } 
}

indexmin, indexmax, minvoltmin and the minvoltmax 是滑块的最小值和最大值。 indexmin 必须在第一列中过滤，minvoltmin 用于第 8 列。

预期的输出是一个表格，当您移动滑块时会发生变化，但它只是清除表格，之后不再更改。

提前感谢您的帮助:)

【问题讨论】：

标签： javascript jquery html jquery-ui filtering

【解决方案1】：

如果您找到答案，我不知道您是否应该回答自己的问题，但我找到了：D

function slide(){
var table = document.getElementById("ADC_DAC");
for (var i = 1, row; row = table.rows[i]; i++) {
    //iterate through rows (we SKIP the first row: counter starts at 1!)
    for (var j = 0, col; col = row.cells[j]; j++) {
        //iterate through columns: if first column not in range: HIDE,else SHOW                                                                    
        // if first column
        if ($(table.rows[i].cells[0]).html() >= indexmin && $(table.rows[i].cells[0]).html() <= indexmax && $(table.rows[i].cells[7]).html() >= minvoltagemin && $(table.rows[i].cells[7]).html() <= minvoltagemax) {
            // if in interval
            $(row).show();
        } else {
            $(row).hide();
        }                                                                     
    }  
} 
}

slide() 函数会在每一个滑块移动时执行。

希望对某人有所帮助:)

【讨论】：