動態更改html表格以在移動設備上顯示

Question

我正在創建一個移動設備優化網站，該網站通過識別來自移動設備的請求動態創建，操縱現有頁面以使用php和html解析器QueryPath進行移動優化。 我打算處理的一些頁面包含html表格，例如this one，它們在移動設備上不能很好地顯示。

我正在尋找一個函數，可以處理任何數量的行和列的任何html表格，並操縱它，以便它在移動設備上顯示格式良好。我正在使用jquery移動框架。

php或javascript/jquery中的解決方案會很棒。

這裏是我的意思一個的jsfiddle：Link

Answer 1

我已經使用這個響應表方法從絲 - responsive tables，demo ，把它變成一個jQuery Mobile的「擴展」之稱的tableview - 見here。

要使用它，您只需在HTML標記內指定哪些列最重要，最不重要，然後添加相應的JQM觸發器，其餘的擴展則處理其餘部分。根據屏幕大小，顯示優先級列，而其他列是隱藏的。

我將原始示例中的「顯示」按鈕和菜單更改爲JQM自定義選擇，您可以根據需要切換列，添加過濾器（與JQM listview相同），可排序標題（僅嵌入按鈕，沒有功能），動態複選框，突出顯示和其他一些東西。

該擴展沒有完成，不包含任何邏輯（排序，分頁等），除了過濾器。

我也在研究一個datatables.net版本的tableview。讓我知道，如果你需要一個這樣的工作例子。或多或少地完成。