CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uifiltering
BaanAxe
BaanAxe

Reputation: 295

Jquery filter table with multiple range sliders

the other day i asked almost the same question

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

i got a fast and good answer on it, and i tought i could change it myself to make it so it accepts multiple range sliders and would filter on them all. I tried writing a function like this: 

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 are the minimal and max from the sliders. the indexmin has to filter in the first column and the minvoltmin is for the 8th column.

the expected output was a table that changes when you move the slider, but it just clears the table and doesnt change anymore after that.

Thanks for the help in advance :)

Upvotes: 2

Views: 1423

Answers (1)

BaanAxe
BaanAxe

Reputation: 295

i dont know if you are supposed to answer your own questions if you found the answer but i found it :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();
        }                                                                     
    }  
} 
}

the slide() function gets executed everytime one of the sliders move.

hope it helpfull to someone :)

Upvotes: 2

Related Questions