禅道项目管理软件bug过滤脚本

新公司使用禅道做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();

// 显示所有请手动调用　　cd.show();

嗯，JavaScript能作的事实在太多。
面对别人的网站，咱们也能够大有可为。
不少浏览器插件，其实也是在别人的网站上运行本身的脚本实现 一些操做。好比拦截广告。抢月饼。。。
做为一个前端程序员来说，顺手写几行脚本提升一点工做效率也是不错的。

github:https://github.com/liusaint/J...
注：本文同步发表在个人CSDN博客上。