使用JQuery使用下拉列表过滤HTML表值

Question

I am new to coding and have had trouble finding the answer to this question. I think my lack of industry vocabulary is limiting my ability to properly search for the solution.. I've searched for two days.

I have a simple HTML table displaying data from my firebase database. The table looks something like this:

Date       Google   Yelp   Bing
-----------------------------------
Mar 2015     1       3      2
Feb 2015     4       0      2
Jan 2015     0       6      1

The above table is representative of where our medical practice receives its patients each month. We are an office of four doctors.

QUESTION: I'd like to create a dropdown at the top of the table with a list of each doc's name. When I choose the doctor, the table updates automatically with only the stats for that doctor.

How do I solve this? How do I filter my data? I'd be super happy if someone could point me in the right direction.

LIMITATIONS: I am learning HTML, CSS, JAVASCRIPT, and JQUERY and would like to limit my answer using only those languages.

FIREBASE DATABASE: Below is a snippet of the firebase export... notice how each patient is entered into the db as a unique object (ie. "-JlItUSK...").

Then what I do is query the db like this: If the date is march 2015, and the channel is 'Internet', display it in this table cell.

But when I showed this amazing referral tracker to the doctors, their immediate response was: "can I filter by my name?" and "what if I only want to see the female patients - can I filter by gender?"

So, to reiterate my question: how do I create a dropdown that will re-query the database and show the new data based upon the 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"
    }
  }
}

Answer 1

Edited, due to new code and data from OP:

I've made a small example of how you could filter the data, with requerying the database. I only used two of your tables, so you'll have to add the filter mechanic to the rest of your code.

I used this to filter by doctor (in the change event of a select):

fbEntries.orderByChild("doctor").equalTo(myFilterVariable).on("value", function (snapshot) {
    var fbobj = snapshot.val();
    parseMyData(fbobj); //I placed your old code in this new function
});

A few things regarding your code (not bad at all for aa beginner!):

You use a lot of static code and quite messy iterations to manipulate the DOM. I followed your structure as much as I could, but also had to create a few functions, move some code and reorder it in some places. I hope you can find your way around.

I also had to fix some html issues. All your dynamic html was created in "thead", and I needed to be able to remove (reinitialize) the table rows, so I added tbody and a few other things.

Id's are supposed to be unique! You have the table id monthly-by-doc on several tables (there are more examples). Make sure that id's are unique for the entire page. I fixed this in my example.

You can see and test the code here: http://jsfiddle.net/9bqdf121/2/