[Js/Jquery]table行轉列

摘要

在使用ews調用exhange的收件箱的並在h5頁面顯示郵件詳情的時候，因為返回的每封郵件的內容都是htmlbody，沒有textbody。每封郵件又沒什么規律，用正則表達式來匹配內容並不合適，另外又要保持原郵件的格式。這個確實很難統一。目前是使用iframe標簽，將原郵件的html在iframe中展示。但問題又來了，如果郵寄中有大表格，大圖片，如何保持郵件內容自適應？

思考

通常的做法是在head中添加meta標簽

<meta name="viewport" content="width=device-width,user-scalable=0" />

但並不能解決所有的問題。

1.圖片

圖片自適應

img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 }

通過上面的代碼，來控制圖片的寬度，但也並不完美。因為手機屏幕到底多寬，是不確定的，目前是讓iframe自適應，然后將寬度圖片寬度設置為100%。

2.table

表格問題，最讓人頭疼，如果是單列的表格，還能做到適應，如果遇到table中嵌套table，嵌套img的，還是適應不了。今天，在想，多列的適應不了，那么我給它轉成一列的能否解決問題？

也算一種嘗試，不知道能否解決。

@{
    ViewBag.Title = "Table";
}

@model  IEnumerable<Wolfy.LogMonitor.Models.Log>
<table style="width:100%;" id="tb1" border="1">
    <tr>
        <td>類型</td>
        <td>內容</td>
        <td>時間</td>
        @*<td>嵌套table</td>*@
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Type</td>
            <td>@item.Content</td>
            <td>@item.Dt</td>
            @*<td>
                    <table style="width:100%;" id="tb2">
                        <tr>
                            <td>類型</td>
                            <td>內容</td>
                            <td>時間</td>
                        </tr>
                        @foreach (var item2 in Model)
                        {
                            <tr>
                                <td>@item2.Type</td>
                                <td>@item2.Content</td>
                                <td>@item2.Dt</td>
                            </tr>
                        }
                    </table>
                </td>*@
        </tr>
    }
</table>


<script>
    $.fn.convertColumns2Rows = function (obj) {
        console.log(obj);
        var self = new Object();
        if (!obj) {
            var self = this;
        } else {
            self = obj;
        }
        var tds = $(self).find("tr").find("td");
        if (tds.length > 2) {
            //清空原表格內容
            $(self).html('');
            $.each(tds, function (index, element) {
                $.fn.convertColumns2Rows($(element));
                $('<tr><td>' + $(element).html() + '</td></tr>').appendTo($(self));
            });
        }

    };
    var tables = $("table");
    console.log(tables.length)
    for (var i = 0; i < tables.length; i++) {
        $(tables[i]).convertColumns2Rows();
    }
    //$("#tb2").convertColumns2Rows();
</script>

上面，為表格添加了擴展方法，實現將多列的表格轉換為一列多行的。

原始表格

轉換后的表格

以及表格嵌套表格，在擴展方法中，添加了遞歸。

轉換后的

總結

關於exhange中email內容的展示，目前也沒一個完美的解決方案，怎么讓它自適應。目前也嘗試很多方法。這個行轉列的問題，也是進行嘗試的一種。exchange返回的html並沒有自己做自適應，只能在返回的內容中，自己做適配了。如果你也遇到這樣的問題，該如何解決？期待更好的解決方案。