Question

我想添加一些列过滤器，以便过滤某些html报告中的数据，但我没有友好访问HTML生成器，所以我的方法是通过在本报告的外部CSS中添加一些黑客来实现它。

任何想法的人？

HTML报告生成器：

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

HTML报告（实际视图）：

enter image description here

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

上查看这个问题。

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

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

1 个答案: