Question

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

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

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

上表代表了我们的医疗实践每个月接收患者的地方。我们是四位医生的办公室。

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

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

限制：我正在学习HTML，CSS，JAVASCRIPT和JQUERY，并希望仅使用这些语言来限制我的答案。

FIREBASE DATABASE：以下是firebase导出的片段...请注意每位患者如何作为唯一对象进入数据库（即＆＃34; -JlItUSK ......＆＃34;）。

然后我这样做就像这样查询数据库：如果日期是2015年3月，并且频道是“互联网”，则将其显示在此表格单元格中。

但是当我向医生展示这个惊人的推荐跟踪器时，他们的反应是：＆＃34;我可以按照我的名字过滤吗？＆＃34;和＆＃34;如果我只想看女性患者怎么办？我可以按性别过滤吗？＆＃34;

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

{
  "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的新代码和数据而被编辑：

我做了一个小例子，说明如何过滤数据，重新查询数据库。我只使用了两个表，因此您必须将过滤器机制添加到其余代码中。

我用它来过滤doctor（在选择的更改事件中）：

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都是在＆＃34; thead＆＃34;中创建的，我需要能够删除（重新初始化）表行，所以我添加了tbody和其他一些东西。

Id应该是独一无二的！您在几个表上有表monthly-by-doc（还有更多示例）。确保id对整个页面都是唯一的。我在我的例子中解决了这个问题。

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

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

1 个答案: