javascript - Filter HTML Table Values with Dropdown Using JQuery -


i new coding , have had trouble finding answer question. think lack of industry vocabulary limiting ability search solution.. i've searched 2 days.

i have simple html table displaying data firebase database. table looks this:

date       google   yelp   bing ----------------------------------- mar 2015     1       3      2 feb 2015     4       0      2 jan 2015     0       6      1 

the above table representative of our medical practice receives patients each month. office of 4 doctors.

question: i'd create dropdown @ top of table list of each doc's name. when choose doctor, table updates automatically stats doctor.

how solve this? how filter data? i'd super happy if point me in right direction.

limitations: learning html, css, javascript, , jquery , limit answer using languages.

firebase database: below snippet of firebase export... notice how each patient entered db unique object (ie. "-jlitusk...").

then query db this: if date march 2015, , channel 'internet', display in table cell.

but when showed amazing referral tracker doctors, immediate response was: "can filter name?" , "what if want see female patients - can filter gender?"

so, reiterate question: how create dropdown re-query database , show new data based upon doctor's filter choice?

{   "entries" : {     "-jlitusk9n-gd70xaygz" : {       "age" : "22",       "channel" : "null",       "country" : "usa",       "date" : "2010-02-26",       "doctor" : "bh",       "gender" : "female",       "initials" : "ow",       "source" : "insurance",       "zip" : "90047"     },     "-jliy5378hyrzppiw0ll" : {       "age" : "12",       "channel" : "google",       "country" : "usa",       "date" : "2014-05-26",       "doctor" : "lc",       "gender" : "male",       "initials" : "fn",       "source" : "internet",       "zip" : "90029"     },     "-jlizkfsxx9xdvzc74x7" : {       "age" : "12",       "channel" : "bing",       "country" : "usa",       "date" : "2011-11-26",       "doctor" : "bh",       "gender" : "male",       "initials" : "si",       "source" : "internet",       "zip" : "90021"     }   } } 

edited, due new code , data op:

i've made small example of how filter data, requerying database. used 2 of tables, you'll have add filter mechanic rest of code.

i used filter doctor (in change event of select):

fbentries.orderbychild("doctor").equalto(myfiltervariable).on("value", function (snapshot) {     var fbobj = snapshot.val();     parsemydata(fbobj); //i placed old code in new function }); 

a few things regarding code (not bad @ a beginner!):

you use lot of static code , quite messy iterations manipulate dom. followed structure as could, had create few functions, move code , reorder in places. hope can find way around.

i had fix html issues. dynamic html created in "thead", , needed able remove (reinitialize) table rows, added tbody , few other things.

id's supposed unique! have table id monthly-by-doc on several tables (there more examples). make sure id's unique entire page. fixed in example.

you can see , test code here: http://jsfiddle.net/9bqdf121/2/


Comments

Popular posts from this blog

tcpdump - How to check if server received packet (acknowledged) -