javascript - CSS3 - 有没有办法添加一些列过滤器？

Question

我想添加一些列过滤器以允许在某些 html 报告中过滤数据， 但我没有对 html 生成器的友好访问权限， 所以我的简单方法是在本报告的外部 CSS 中添加一些 hack。

有什么想法吗？

HTML 报告生成器:

https://www.npmjs.com/package/protractor-html-screenshot-reporter

HTML 报告(实际 View ):

CSS:

body{
    font-family:Arial
}

h1 {
    padding-top: 15px;
    padding-bottom: 5px;
    text-shadow: 3px 3px #D0D0D0;
    text-align: center;
    font-size: 40px;
}

h2 {
    background-color: #C0C0C0;
}

h1:after {
    content: " - vCita Production \a";
    white-space: pre;
}

div {
    padding-bottom: 50px;
    font-size: 18px;
}

ul,li{
    margin-left:0;
    padding-left:0;
    width:100%;
    font-weight:bold;
    padding-top: 5px;
    font-size: 18px;
}

table{
    width:95%;text-align:left;
    border-spacing:0;
    border-collapse: separate;
    margin-bottom:5px;

}

body > ul {
  margin: 0 30px;
}

li{
    font-weight:bold;
    list-style:none;
    width: 1900px;
    width:100% !important;
}

ul table li{
    font-weight: normal;
}

th {
    padding: 10px;
    border: 1px solid #FFFFFF;
}

td {
    padding: 10px;
    border: 1px solid #C0C0C0;
}
td:hover {
    background: #F0F0F0;
}

a:hover {
    color: gray;
}

td.desc-col{
    width:500px;
}

th.desc-col{
    width: 500px;
}

td.status-col{
    width:75px;
}

th.status-col{
    width: 75px;
}

td.browser-col{
    width:160px;
}

th.browser-col{
    width: 160px;
}

td.os-col{
    width:100px;
}

th.os-col{
    width: 100px;
}

th.img-col{
    width: 50px;
}

td.img-col{
    width: 80px;
}

th.msg-col{
    width: 200px;
}

td.msg-col{
    width: 200px;
    word-break: break-all;
    display: inline-block !important;
}


table.header{
    background-color: gray;
     color: #fff;
     margin-left:30px;
}

.traceinfo{
    position: fixed;
    top: 0;
     bottom: 0;
     left: 0;
     right:0;
     background: rgba(0,0,0,0.8);
     z-index: 99999;opacity:0;
     -webkit-transition: opacity 400ms ease-in;
     transition: opacity 400ms ease-in;
     pointer-events: none;

}

.traceinfo.visible{
    opacity:1;
    pointer-events: auto;
}

.traceinfo > div{
    width: 800px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
    overflow: auto;
    max-height: 75%;
    font-size: 14px;
}

.traceinfo .close{
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
}

.traceinfo .close:hover{
    background: #00d9ff;
}

img.alt{
src: url(http://idantesting.comuv.com/public_html/reports/);
}

Answer 1

不幸的是，你不能用 css 做到这一点，你需要一个 javascript 解决方案。

虽然可以从头开始编写它，但它比您想象的要大得多，但是您可以使用几个插件，例如:

list.js - 具有对表格和列表进行排序的功能

watable - 需要 jquery 但提供了很多功能

如果你真的想从头开始写一些东西，你可以在 jquery sorter for rows 上查看这个 SO 问题

当您使用节点包生成报告时，(据我所知)没有一种方法可以像添加自定义 CSS 一样添加自定义 javascriot。一种选择是使用 grunt 运行报告，然后使用模板/查找/替换插入 javascript 代码 <script src="[some url">进入已呈现的 html