手機開發: 表格中的行轉成新的表格

一個長長的表格可能對手機展示不一定合適，比如以下截圖:

其實我們可以把表格內容的每個行新建成新的表格，這樣就可以實現比較好的展示效果了:

如何實現呢？我現在已經打包成函式了，你們可以方便的這樣實現:

row2table("#表格ID", "分類名稱");

演示:

http://weijinglin.name/device/router/

全部程式碼如下:

function row2table (jqSelector, targetClass) {
            var fieldTitle = new Array();
            var isFirst = true;

            // 隱藏原來的表格
            $(jqSelector).hide();

            // 修改寬度，自適應
            $(".mainContainer").width("auto");

            // 建立標題陣列
            $(jqSelector + " th").each(function(i, o){
                fieldTitle.push($(this).text());
            });

            // 本函式核心部分，為每個行建立表格
            $(jqSelector + " tr:not(:first)").each(function (i,o) {
                // 新建一個空表格，並設定一些風格，根據自己需要去修改
                var resultHTML = $("<table class='" + targetClass + " textTop' style='width: 100%; margin-bottom: 20px'>");

                // 一個表格中的資料搭建
                $(fieldTitle).each(function (j, k) {

                    // 建立標題
                    resultHTML.append("<tr><th>" + k + "</th></tr>");

                    // 建立內容
                    resultHTML.append("<tr><td>" + $(o).children("td:eq("+j+")").html() +"</td></tr>");

                    // 插入到最後一個表格後面
                    if(isFirst){
                        $(jqSelector).after(resultHTML);
                    } else {
                        $("." + targetClass + ":last").after(resultHTML);
                    }
                }); 
            }); 
        }

其他

本案例基於 jQuery，所以首先你要先 script 一下:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

jQuery 沒有內建的手機裝置的判斷方式，自己加下:

var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i) ? true: false;
            },
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i) ? true: false;
            },
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true: false;
            },
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i) ? true: false;
            },
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
            }
        };

        if (isMobile.any()) {
            row2table("#mainTable", "mainTable");
            // 其他程式碼 ...
        }

手機開發其他要注意的是 meta 的設定:

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

祝你用得愉快