CODEWITHSUNDEEP
javascripthtmldomdrop-down-menu
kninjaboi
kninjaboi

Reputation: 201

Javascript only: Function renders a dropdown and table where the value from the dropdown is needed to filter the table

I created a function which renders a dropdown and a table. This dropdown gives me values which I use inside the function to filter the table. For some reason, it does not update when I reselect something on the dropdown.

No frameworks please thank you!

Here are some screenshots: Displays based on date range It does not update the columns showed because when I console.log() the values from the dropdown it does not update. It still says 1 5 but when I click the second one it should say 2 5. enter image description here I selected the second option on the dropdown. I have no idea how to do this. Sorry, I'm a beginner.

//function which we will use to hide and unhide rows
function toggleClass(element, className, toSet) {
    element.classList[toSet ? 'add' : 'remove'](className);
}
//The table is already rendered and when the buttons on the screen are clicked, this pagination function is called
function columnPagination(input) {
    var table = document.getElementById("tablePrint"),
    dataRows = table.getElementsByTagName('tr'),
    listHTML = "";
    //get date labels for dropdown
    var filterDateLabels = [];
    var columns = table.getElementsByTagName('th');
    for(var ii = 0; ii < columns.length; ii++){
        if(ii%input==0){
            filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
        }
        if(ii%input==input-1){
            filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
        }
    }
    //display dropdown with values which you will use to filter the table
    listHTML += "<select id=\"pagenumber\")>";
    for(var ii = 0; ii < filterDateLabels.length; ii++){
        listHTML += "<option value = \"" + ii + "\">" + filterDateLabels[ii] + " - ";
        if(filterDateLabels[ii+1]!= ""){
            listHTML += filterDateLabels[ii+1] + "</option>";
            ii++;
        }
        else{
            listHTML+="LAST </select>";
        }
    }
    document.getElementById('dates').innerHTML = listHTML;
    var multiplier = document.getElementById('pagenumber').value;
    multiplier = multiplier/2;
    if(multiplier == 0){
        multiplier = 1;
    }
    //hiding function which works but doesn't update when the dropdown is clicked
    input = input*multiplier;
    console.log(multiplier, input);
    for (var i = 0; i < dataRows.length; i++) {
        var cells = dataRows[i].children;
        for (var cell = 0; cell < cells.length; cell++) {
            toggleClass(cells[cell], 'hide', cell > input)
        }
    }
}

Upvotes: 2

Views: 940

Answers (1)

kninjaboi
kninjaboi

Reputation: 201

I ended up just using onchange="myFunction()".

http://www.w3schools.com/jsref/event_onchange.asp

Everything you need is up there if you encounter the same issue as I did. I was having trouble because I was editing the wrong file. @KevinKloet helped me realize that by pointing out another error. Thanks!

Upvotes: 1

Related Questions