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

Question

我想添加一些列过滤器以允许过滤某些 html 报告中的数据， 但我无法友好地访问 html 生成器， 所以我的简单方法是在此报告的外部 css 中添加一些 hack。

各位有什么想法吗？

HTML 报告生成器：

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

HTML 报告（实际视图）：

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 问题

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