在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
在URL里传入数组到HTML 里。的更多相关文章
- PHP传入数组到js
1.方式一,处理成字符串 js再将字符串处理成数组. var spec1_default = "{$spec1_default}"; spec1_default = spec1_d ...
- 我的Java开发学习之旅------>使用循环递归算法把数组里数据数组合全部列出
面试题如下:把一个数组里的数组合全部列出,比如1和2列出来为1,2,12,21. (面试题出自<Java程序员面试宝典>) 代码如下: import java.util.Arrays; i ...
- PHP的数组值传入JavaScript的数组里
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html><head> &l ...
- 需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP
需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP 需求:过滤下面这个网页里共723行 校对中里 行数为两位数 ...
- JS 函数的柯里化与反柯里化
===================================== 函数的柯里化与反柯里化 ===================================== [这是一篇比较久之前的总 ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
- jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
- MVC5中使用jQuery Post 二维数组和一维数组到Action
很久没有写了,最近在做一个MVC项目,这是我做的第一个MVC项目.之前可以说多MVC一点都不了解,今天把昨天遇到的一个问题记录下来.MVC大神就请飘过吧,跟我遇到同样问题的可以进来看看.遇到的第一个问 ...
- winform里操作打开在panel里的form窗体,子窗体操作同级子窗体或者父窗体的方法
最近开始了一个winform项目,原先一直都是web项目.遇到个问题,就是在框架内,左侧和中间的main都是用panel来实现的form,就是把form窗体打开到panel里,实现左侧是导航,中间是操 ...
随机推荐
- Python 3.7版本关于json.dump失效
1.刚才写练习的时候,一直在报错,如图所示 2.度娘之后,才发现是因为我的文件名:json.py 与json.py冲突 所以该一个名字就ok了,如图所示
- Zookeeper选举算法原理
Zookeeper选举算法原理 Leader选举 Leader选举是保证分布式数据一致性的关键所在.当Zookeeper集群中的一台服务器出现以下两种情况之一时,需要进入Leader选举. (1) 服 ...
- [转]Hive 数据类型
Hive的内置数据类型可以分为两大类:(1).基础数据类型:(2).复杂数据类型.其中,基础数据类型包括:TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBL ...
- (转)MySQL- 5.7 sys schema笔记,mysql-schema
原文:http://www.bkjia.com/Mysql/1222405.html http://www.ywnds.com/?p=5045 performance_schema提供监控策略及大量监 ...
- 我的Python升级打怪之路【七】:网络编程
Socket网络套接字 socket通常也称为"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过”套接字“向网络发出请求或者应答网络请求. socket起源于 ...
- <? extends A> 和 <? super A> 的意思
/** * @author Lee Boynton * @author Arthur van Hoff * @author Martin Buchholz * @author Ulf Zibis * ...
- 如何使标签a处于不可用状态
今天做项目的时候突然发现a标签下用disabled无法使它的点击事件失效(貌似ie下可以,没有测试过), 首先说一下项目要求,点击a标签(点击之后以防多次快速点击,这里需要点击后使标签a实现),触发a ...
- mybatis 批量增加 Parameter '__frch_item_0' not found. Available parameters are [list]
当在mybatis用到foreach的时候,会报这个错误Parameter '__frch_item_0' not found. Available parameters are [list]会出现的 ...
- Mac新手问题
[现象:]MAC下checkout代码时,报svn:E170013-unable to connect to a repository at url xxx, svn:E1700113: unable ...
- 架构实战项目心得(四):使用Nexus配置Maven私有仓库
一.安装配置Nexus 1. 下载nexus https://www.sonatype.com/download-oss-sonatype 2. 解压:tar -zxfnexus-3.5.2-01 ...