在URL里傳入數組到HTML 里。

需求

靜態頁面根據URL輸入,動態顯示圖表滿足如下兩個條件。

1. 隱藏指定的行

2. 設定初始顯示的Check box 需要的部分被打勾

實現

1. 創建一個靜態的頁面，

<table id="ScreeningTable">
<tbody>
        <tr>
            <th>
                <input type="checkbox" id="selectAll" onclick="checkAll(this)">
            </th>
            <th>TestID</th>
            <th>Pillar</th>
            <th>Scenario</th>
        </tr>
        <tr id="01-00001" name="row">
            <td align="center" >
                <input type="checkbox" class="case" name="checkItem" value="01-00001">
            </td>
            <td>01-00001</td>
            <td>Pillar1</td>
            <td>Scenario1</td>
        </tr>
         <tr id="01-00002" name="row">
             <td align="center" id="04-00005">
                <input type="checkbox" class="case" name="checkItem" value="01-00002">
            </td>
            <td>01-00002</td>
            <td>Pillar1</td>
            <td>Scenario2</td>
        </tr>
         <tr id="01-00003" name="row">
            <td align="center" id="04-00012">
                <input type="checkbox" class="case" name="checkItem" value="01-00003">
            </td>
            <td>01-00003</td>
            <td>Pillar1</td>
            <td>Scenario3</td>
        </tr>
        <tr id="01-00004" name="row">
            <td align="center" id="04-00004">
                <input type="checkbox" class="case" name="checkItem" value="01-00004">
            </td>
            <td>01-00004</td>
            <td>Pillar1</td>
            <td>Scenario4</td>
        </tr>
       <tr id="01-00005" name="row">
            <td align="center" id="04-00005">
                <input type="checkbox" class="case" name="checkItem" value="01-00005">
            </td>
            <td>01-00005</td>
            <td>Pillar2</td>
            <td>Scenario1</td>
        <tr id="01-00006" name="row">
                <tr>
             <td align="center" id="04-00006">
                <input type="checkbox" class="case" name="checkItem" value="01-00006">
            </td>
            <td>01-00006</td>
            <td>Pillar2</td>
            <td>Scenario2</td>
        </tr>
               
               <tr id="01-00007" name="row">
             <td align="center" id="04-00008">
                <input type="checkbox" class="case" name="checkItem" value="01-00007">
            </td>
            <td>01-00007</td>
            <td>Pillar2</td>
            <td>Scenario3</td>
        
                </tr>
                <tr id="01-00008" name="row">
             <td align="center" id="04-00010">
                <input type="checkbox" class="case" name="checkItem" value="01-00008">
            </td>
            <td>01-00007</td>
            <td>Pillar3</td>
            <td>Scenario1</td>
        </tr>
        </tbody>
</table>

 

寫3個方法：

1.1 一個是隱藏指定的行

function HiddenRows(config)
{
    var rowIds = config.split(";")[0].split(",");
alert(rowIds);    
    for(var i = 0, rowslength = rowIds.length; i<rowslength; i++)
    {
        var row = document.getElementById(rowIds[i]);
        if (row != null) 
        {
            row.style.display = "none";
        }
    }
}

 

1.2 修改Checkbox 狀態

 

function SetChecedItems(config)
{
    var checkItems = document.getElementsByClassName('case');
    var ids = config.split(";")[1].split(",");

    for(var i=0;i< checkItems.length;i++)
    {
        alert(checkItems[i].value);
        for(var j=0; j< ids.length; j++)
        {
            if(checkItems[i].value == ids[j])
            {
                alert(checkItems[i].value);
                checkItems[i].checked = true; 
            }
        }
    }
}

 

1.3 解析URL傳來的參數

function GetQueryString(name) {  
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
    var r = window.location.search.substr(1).match(reg);  //獲取url中"?"符后的字符串並正則匹配
    var context = "";  
    if (r != null)  
         context = r[2];  
    reg = null;  
    r = null;  
    return context == null || context == "" || context == "undefined" ? "" : context;  
}

  

 

關於Debug

JavaScript 可以直接在瀏覽器例如IE里面Debug，在IE菜單里面找到Developer Tools 打開即可，可以設置斷點觀察值，還是比較方便的。

在此例中，在地址欄輸入 xxxx.htm?config=01-00001,01-00002;01-00005 回車后，就可以開始進行調試。

 

 

 

 

參考：

http://www.jb51.net/article/48942.htm