使用JQuery過濾HTML表格值並使用下拉使用JQuery

我是新來的編碼，並且無法找到這個問題的答案。我認爲我缺乏行業詞彙量限制了我正確搜索解決方案的能力..我搜索了兩天。使用JQuery過濾HTML表格值並使用下拉使用JQuery

我有一個簡單的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 export的一部分...注意每個患者是如何作爲獨特對象進入db的（例如「-JlItUSK ...」）。

然後我所做的就是像這樣查詢數據庫：如果日期是2015年3月，並且頻道是'Internet'，請將其顯示在此表格單元格中。

但是，當我向醫生展示這個驚人的轉診跟蹤器時，他們的直接反應是：「我可以按我的名字篩選嗎？」和「如果我只想看女病人怎麼辦？我可以按性別過濾嗎？」

因此，爲了重申我的問題：如何創建一個下拉菜單，它將重新查詢數據庫並根據醫生的過濾器選擇顯示新數據？

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

來源

2015-04-01 Benjamin Hoffman

看看數據表 - 這是一個jQuery插件 - 則是這樣的：https://www.datatables.net/plug-ins/filtering/- 有很多方法可以做到這一點，但這是一個很好的開始，沒有重新發明輪子 – 2015-04-01 06:06:26

迄今爲止，您已經完成了哪些工作？任何代碼？ – Puneet 2015-04-01 06:25:20

@DarrenSweeney看起來像一個很好的資源。現在回顧一下。感謝您的即時回覆。 – 2015-04-02 07:17:53

編輯，由於新的代碼和數據從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 
});

關於你的代碼有幾件事情（不壞爲AA初學者！）：

你使用大量的靜態代碼和相當混亂的迭代來操縱DOM。我儘可能多地遵循你的結構，但也必須創建一些函數，移動一些代碼並在某些地方重新排序。我希望你能找到你的路。

我也必須解決一些html問題。所有的動態html都是在「thead」中創建的，我需要能夠刪除（重新初始化）表格行，所以我添加了tbody和其他一些東西。

身份證應該是獨一無二的！你有幾張桌子上的桌子ID爲monthly-by-doc（還有更多的例子）。確保該ID對整個頁面都是唯一的。我在我的例子中解決了這個問題

你可以看到，在這裏測試代碼：http://jsfiddle.net/9bqdf121/2/

來源

2015-04-01 06:25:28 Mackan

感謝您的即時回覆。非常感激。在你的例子中，你正在顯示和隱藏基於下拉選擇的數據。 – 2015-04-02 07:21:21

我在閱讀所有人的評論後更新了我的問題。我希望澄清。你可以看看，讓我知道這是否有幫助嗎？謝謝@mackan – 2015-04-02 14:32:58

@BenjaminHoffman非常感謝您使用一些示例數據進行了更新。你還可以提供你的代碼在創建表時的樣子嗎？我想用同樣的方法將數據分組到「句點」，並將它們添加爲「總計」，因此您最終不會得到兩組完全不同的代碼。 – Mackan 2015-04-02 18:18:00

使用JQuery過濾HTML表格值並使用下拉使用JQuery

回答

相關問題