使用 JQuery 过滤 HTML Table 个值

Question

我是编码新手，找不到这个问题的答案。我认为我缺乏行业词汇限制了我正确搜索解决方案的能力。我已经搜索了两天。

我有一个简单的 HTML table 显示来自我的 firebase 数据库的数据。 table 看起来像这样：

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

以上 table 代表我们的医疗机构每月接收患者的地点。我们是一个四位医生的办公室。

问题：我想在 table 的顶部创建一个下拉列表，其中包含每个文档名称的列表。当我选择医生时，table 会自动更新，仅显示该医生的统计数据。

我该如何解决这个问题？如何过滤我的数据？如果有人能指出正确的方向，我会非常高兴。

限制：我正在学习 HTML、CSS、JAVASCRIPT 和 JQUERY，我想限制我的回答仅使用这些语言。

FIREBASE 数据库：下面是 Firebase 导出的片段...请注意每个患者是如何作为唯一对象（即“-JlItUSK...”）输入数据库的。

然后我要做的是像这样查询数据库：如果日期是 2015 年 3 月，频道是 'Internet'，请将其显示在这个 table 单元格中。

但是当我向医生展示这个惊人的转诊追踪器时，他们的第一反应是："can I filter by my name?" 和 "what if I only want to see the female patients - can I filter by gender?"

那么，重申一下我的问题：我如何创建一个下拉列表来重新查询数据库并根据医生的过滤器选择显示新数据？

{
  "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

已编辑，由于来自 OP 的新代码和数据：

我举了一个小例子来说明如何通过重新查询数据库来过滤数据。我只使用了你的两个 table，所以你必须将过滤器机制添加到你的其余代码中。

我用它来过滤 doctor（在 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
});

关于您的代码的一些事情（对于初学者来说一点也不差！）：

您使用大量静态代码和相当混乱的迭代来操作 DOM。我尽可能地遵循了你的结构，但也必须创建一些函数，移动一些代码并在某些地方重新排序。我希望你能找到自己的出路。

我还必须解决一些 html 问题。您所有的动态 html 都是在 "thead" 中创建的，我需要能够删除（重新初始化）table 行，所以我添加了 tbody 和其他一些东西。

ID 应该是唯一的！您在多个 table 上有 table id monthly-by-doc（还有更多示例）。确保 id 对于整个页面都是唯一的。我在示例中修复了这个问题。

您可以在此处查看和测试代码：http://jsfiddle.net/9bqdf121/2/

使用 JQuery 过滤 HTML Table 个值

Filter HTML Table Values with Dropdown Using JQuery

javascript

jquery

firebase