[JavaScript]RWD相關 Table欄位隱藏及收放

　　 最近在設計WebForm時，遇到使用asp:DataGrid物件需RWD效果的情況。
在不能套模板的情況下，只好自己寫出一個陽春FooTable的效果的JS。

重點步驟
1.隱藏需要隱藏直行欄位
2.補回被隱藏的內容在原資料的下列
3.加入縮放功能

成品(電腦模式)

成品(手機模式)

程式碼
<script type="text/javascript" language="JavaScript">

　　//要隱藏的欄位抬頭 陣列(這邊依實際狀況替換)
        var StrArray = ["申請單號", "申請類型", "品項", "數量", "單位", "審核人"];

　　//加入視窗畫面變化的事件
　　document.getElementsByTagName("BODY")[0].onresize = function () { ReSetTableCol("DataGrid1", StrArray) };
　　
    　//第一次讀取時也要先呼叫一次function
    　window.onload = function () { ReSetTableCol("DataGrid1", StrArray) };

    　//開始撰寫 function
    　//參數 TableID: HTMLTable標記ID
　　//參數 HiddenTitleArray: 要隱藏的欄位抬頭 陣列
    　function ReSetTableCol(TableID, HiddenTitleArray) {
        　　var table1 = document.getElementById(TableID);
       　　 
        　　//紀錄要隱藏的直行序 陣列
        　　var iHidden = [];
        　　//紀錄隱藏欄位的資料合併 陣列
        　　var StrColValue = [];
        　　var StrTemp = "";

       　　 //抓出要隱藏中的一個直行欄位序號(目的是為了拿來做尺寸判斷)
       　 　var iTemp = 0;
        　　for (var j = 0, col; col = table1.rows[0].cells[j]; j++) {
            　　　//和抬頭陣列比對內容
            　　　if (HiddenTitleArray.indexOf(col.innerText) != -1) {
                　　　　iTemp = j;
                　　　　break;
            　　　}
        　　}

　　　　//螢幕尺寸模式
　　　　var intMode = 0;

　　　　//螢幕尺寸是否有跨級變化(目前只簡單寫出兩級)
　　　　//有隱藏欄位 代表目前為小螢幕模式
　　　　if (table1.rows[0].cells[iTemp].style.display == "none") {
　　　　　　intMode = 0;
        　   }
　　　　//其他都為正常模式
　　　　else {
　　　　　　intMode = 99;
　　　　}

　　　　//寬度小於等於768 且 不為小螢幕尺寸模式 要做隱藏判斷
　　　　if (window.innerWidth <= 768 && intMode != 0) {
　　　　　　for (var i = 0, row; row = table1.rows[i]; i++) {
　　　　　　　　//暫存隱藏內容
　　　　　　　　StrTemp = "";
　　　　　　　　for (var j = 0, col; col = row.cells[j]; j++) {
　　　　　　　　　　//要隱藏的直行序判斷並記錄
　　　　　　　　　　if (HiddenTitleArray.indexOf(col.innerText) != -1 && i == 0) {
　　　　　　　　　　　　iHidden.push(j);
　　　　　　　　　　}
　　　　　　　　　　//在隱藏名單內就隱藏
　　　　　　　　　　if (iHidden.indexOf(j) != -1) {
　　　　　　　　　　　　col.style.display = "none";
　　　　　　　　　　　　if (i != 0) {
　　　　　　　　　　　　　　//紀錄被隱藏內容的 抬頭:值
　　　　　　　　　　　　　　StrTemp += table1.rows[0].cells[j].innerText.trim() + ":" + col.innerText.trim() + "<br />";
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　//加入隱藏欄位的資料合併
　　　　　　　　if (StrTemp.length > 0) StrColValue.push(StrTemp);
　　　　　　}

　　　　　　//補回隱藏的欄位
　　　　　　var num = table1.rows.length - 1;
　　　　　　for (var i = num; i >= 0; i--) {
　　　　　　　　if (i != 0) {
　　　　　　　　　　//新增明細列的ID
　　　　　　　　　　var StrID = TableID + "Row" + (i - 1).toString();
　　　　　　　　　　//新增橫列在原資料下面一筆
　　　　　　　　　　var Tr = table1.insertRow(i + 1);
　　　　　　　　　　//新橫列的第一格
　　　　　　　　　　Td = Tr.insertCell(0);
　　　　　　　　　　Td.colSpan = table1.rows[0].cells.length;
　　　　　　　　　　//加入縮放符號＋和事件
　　　　　　　　　　Td.innerHTML = "<div><a onclick=\"JavaScript:ShowDetail('" + StrID + "');\">&#x2795;</a></div>";
　　　　　　　　　　//加入被隱藏的內容,並預設不顯示
　　　　　　　　　　Td.innerHTML += "<div id=\"" + StrID + "\" style='display: none;'>" + StrColValue[i - 1] + "</div>";
　　　　　　　　}
　　　　　　}
　　　　}
　　　　//寬度大於768 且 為小螢幕尺寸模式
　　　　else if (window.innerWidth > 768 && intMode == 0) {
　　　　　　//刪除新增的橫列
　　　　　　var num = table1.rows.length - 1;
　　　　　　for (var i = num; i > 0; i -= 2) {
　　　　　　　　table1.deleteRow(i)
　　　　　　}
　　　　　　//顯示所有欄位
　　　　　　for (var i = 0, row; row = table1.rows[i]; i++) {
　　　　　　　　for (var j = 0, col; col = row.cells[j]; j++) {
　　　　　　　　　　col.style.display = "";
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　//＋號顯示事件
　　function ShowDetail(StrDivID) {
　　　　if (document.getElementById(StrDivID).style.display == "") {
　　　　　　document.getElementById(StrDivID).style.display = "none";
　　　　}
　　　　else {
　　　　　　document.getElementById(StrDivID).style.display = "";
　　　　}
　　}
</script>

 　
　　最後可以利用C# Page.ClientScript.RegisterClientScriptBlock來動態輸出到頁面前端程式碼，如此一來就可以做到方法化，不用每頁都插入相同JavaScript，還能夠依照不同的Grid傳入不同要隱藏的抬頭參數。