正文

在URL里传入数组到HTML 里。

IP云
IP云V管理员/4 阅读
08/21
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

需求

静态页面根据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