在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