仅过滤突出显示的行

时间：2019-05-20 15:10:45

标签： javascript html filter html-table

我有一个脚本，可以找到两个csv文件之间的差异并将其写入html文件中。这是示例输出代码：

table.table1 {
  border-collapse: collapse;
  border-spacing: 0;
  width: 150px;
  border: 1px solid #000000;
}

table.table1 th {
  text-align: left;
  padding: 5px;
  background-color: #f2f2f2;
  border: 1px solid #000000;
}

table.table1 td {
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 1px solid #000000;
}

table.table2 {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #000000;
}

table.table2 th {
  text-align: center;
  padding: 5px;
  background-color: #f2f2f2;
  border: 1px solid #000000;
}

table.table2 td {
  text-align: left;
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 1px solid #000000;
}
<html>

<head>
</head>

<body>

  <table class="table2">
    <tr>
      <th colspan="2">TILE 1</th>
    </tr>

    <tr>
      <th>example_csv_1</th>
      <th>example_csv_2</th>
    </tr>
    <tr>
      <td>
        <pre>
<span>xx        xxxxxxxxxxxxxxxxxxxx                xx         xxxxxxxxx     xxxxxx    xxxxxxxxxxxxx             xxxxxx        </span>
<span style="background:#ffea0c;">xx        xxxxxxxxxxxxxx                      x          x</span><span style="background:#ff8570;">xxxxxxxxx</span><span style="background:#ffea0c;">    x         x                         x             </span>
<span style="background:#70fff3;">xx        </span><span style="background:#70fff3;">xxxxxxxxxxxxxxxxxx</span><span style="background:#70fff3;">                  </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">          </span><span style="background:#70fff3;">xxx</span><span style="background:#70fff3;">           </span><span style="background:#70fff3;">xxx</span><span style="background:#70fff3;">       </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">   </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">                     </span><span style="background:#70fff3;"></span><span style="background:#70fff3;"> </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">    </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">         </span>
</pre>
      </td>
      <td>
        <pre>
<span>xx        xxxxxxxxxxxxxxxxxxx                xx         xxxxxxxx     xxxxxx    xxxxxxxxxxxx             xxxxxx        </span>
<span style="background:#ffea0c;">xx        xxxxxxxxxxxxx                      x          x</span><span style="background:#ff8570;">xxxxxxxxx</span><span style="background:#ffea0c;">   x         x                        x             </span>
<span style="background:#70fff3;">xx        </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">                  </span><span style="background:#70fff3;">         </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">   </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">      </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">        </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">    </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">                     </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">         </span>
</pre>
      </td>
    </tr>
  </table>
</body>

</html>

我只想过滤掉最后一行（单元格）中突出显示的行-青色和yelow / red（表示差异）。结果将是：

table.table1 {
  border-collapse: collapse;
  border-spacing: 0;
  width: 150px;
  border: 1px solid #000000;
}

table.table1 th {
  text-align: left;
  padding: 5px;
  background-color: #f2f2f2;
  border: 1px solid #000000;
}

table.table1 td {
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 1px solid #000000;
}

table.table2 {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #000000;
}

table.table2 th {
  text-align: center;
  padding: 5px;
  background-color: #f2f2f2;
  border: 1px solid #000000;
}

table.table2 td {
  text-align: left;
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 1px solid #000000;
}
<html>

<head>
</head>

<body>

  <table class="table2">
    <tr>
      <th colspan="2">TILE 1</th>
    </tr>

    <tr>
      <th>example_csv_1</th>
      <th>example_csv_2</th>
    </tr>
    <tr>
      <td>
        <pre>
<span style="background:#ffea0c;">xx        xxxxxxxxxxxxxx                      x          x</span><span style="background:#ff8570;">xxxxxxxxx</span><span style="background:#ffea0c;">    x         x                         x             </span>
<span style="background:#70fff3;">xx        </span><span style="background:#70fff3;">xxxxxxxxxxxxxxxxxx</span><span style="background:#70fff3;">                  </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">          </span><span style="background:#70fff3;">xxx</span><span style="background:#70fff3;">           </span><span style="background:#70fff3;">xxx</span><span style="background:#70fff3;">       </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">   </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">                     </span><span style="background:#70fff3;"></span><span style="background:#70fff3;"> </span><span style="background:#70fff3;">x</span><span style="background:#70fff3;">    </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">         </span>
</pre>
      </td>
      <td>
        <pre>
<span style="background:#ffea0c;">xx        xxxxxxxxxxxxx                      x          x</span><span style="background:#ff8570;">xxxxxxxxx</span><span style="background:#ffea0c;">   x         x                        x             </span>
<span style="background:#70fff3;">xx        </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">                  </span><span style="background:#70fff3;">         </span><span style="background:#70fff3;"></span><span style="background:#70fff3;">   </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">      </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">        </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">    </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">                     </span><span style="background:#70fff3;">xxxxx</span><span style="background:#70fff3;">         </span>
</pre>
      </td>
    </tr>
  </table>
</body>

</html>

有人可以帮我吗？

谢谢！

0 个答案:

没有答案
相关问题
最新问题