新公司使用禪道作bug管理系統。每次產品上線的時候，所有的測試人員測試出bug之就就提在禪道上。
由於我們公司目前的測試只有一個，就把很多產品拉來湊數。他們分不清bug和需求。所以往往出現的情況是一大屏的bug。但實際上能改的沒幾個。並且有很多bug是後端的。
要從那麼多bug中找出來自己能改的，每次都要從那麼多bug中來看，往往看得眼都花了，也沒找出來幾個有效bug，偏偏又不能處理掉，因爲其他人可能要看。
於是決定花點時間寫個腳本來幫我處理一下那些干擾信息。把那些我不需要看到的條目隱藏起來。
要在bug列表table每一行加一個隱藏按鈕。點擊的話會隱藏掉該行。並且把該行的checkbox的value值記錄到localStorage中。
在console控制檯運行腳本，會做這幾件事：
1.給table所有的a標籤加屬性target="_blank"，這樣就會到新頁面打開bug詳情。避免本頁跳轉導致腳本失效。
2.把所有tr行中的checkbox的值放到該tr上。data-id屬性中。方便後續操作。
3.每行加一個隱藏按鈕。並給它綁定事件。點擊按鈕隱藏此行。把最後一個td加長。
4.把localStorage保存的所有值的行隱藏起來。
爲了避免翻頁引起頁面跳轉。先要把每一頁的數量調大一些。這樣操作就在同一個頁面上，不需要多次運行腳本了。
原來的bug可能有這麼多：![]()
運行腳本之後的效果（很多條幹擾信息已經被我隱藏掉了）：
可以看到每一行的右邊都加了一個隱藏按鈕。我們看過bug之後覺得是自己不用理會的。就可以點擊隱藏。
並且下次打開頁面再次運行腳本，你之前隱藏過的就會自動隱藏起來。
這樣就能很大程度上減少干擾信息了。
另外，這個代碼通用性也是比較強的。換一個系統，要實現類似的功能只需要稍作改動就可以。
下面是代碼：
function CD(){}
CD.prototype = {
init:function(){
this.open();
this.hideItems();
this.bindEvent();
},
open:function(){
//所有a標籤新標籤打開
$("td a").attr('target','_blank');
//給每一行加一個我們的按鈕。
$(".s-hide").remove();
$("tr.text-center td:last-child").append('<span class="s-hide" style="margin:0 5px;cursor:pointer;">隱藏</span>');
$("tr th:last").width(170);
//給tr加上id。方便操作
$("tr").each(function(index, el) {
$(this).attr('data-id',$(this).find("input:checkbox").val());
});
},
bindEvent:function(){
//點擊隱藏。
$("body").on('click', '.s-hide', function(event) {
var id = $(this).parents('tr').find("input:checkbox").val();
var hideStr = localStorage.hideStr || '';
var hideArr = hideStr.split("-");
hideArr.push(id);
localStorage.hideStr = hideArr.join("-");
$(this).parents("tr").hide();
});
},
//初始化的時候隱藏我們隱藏過的。
hideItems:function(){
var hideStr = localStorage.hideStr || '';
var hideArr = hideStr.split("-");
var len = hideArr.length;
for (var i = 0; i < len; i++) {
$("tr[data-id="+hideArr[i]+"]").hide();
}
},
//顯示隱藏的。
show:function(){
localStorage.hideStr = '';
$("tr").show();
}
}
//調用
var cd = new CD;
cd.init();嗯，JavaScript能做的事實在太多。
面對別人的網站，我們也可以大有可爲。
很多瀏覽器插件，其實也是在別人的網站上運行自己的腳本實現 一些操作。比如攔截廣告。搶月餅。。。
作爲一個前端程序員來講，順手寫幾行腳本提高一點工作效率也是不錯的。