需求

靜態頁面根據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

?

轉載于:https://www.cnblogs.com/fdyang/p/6708913.html

總結

以上是生活随笔為你收集整理的在URL里传入数组到HTML 里。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。