带有多个滑块的Jquery过滤器表

时间:2015-01-14 10:36:14

标签: javascript jquery html jquery-ui filtering

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

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列中过滤。

预期输出是一个在移动滑块时会发生变化的表格,但它只是清除了表格,之后就不再发生变化了。

先谢谢你的帮助:)

1 个答案:

答案 0 :(得分:2)

我不知道你是否应该回答你自己的问题,如果你找到了答案,但我找到了答案: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()函数就会被执行。

希望对某人有所帮助:)