时间戳

首页 > 解决方案 > 迭代 HTML 表格以突出显示单元格具有多个比较项的差异

javascript - 迭代 HTML 表格以突出显示单元格具有多个比较项的差异

问题描述

我想突出显示表的第一行和所有其他行之间的差异。

当表格中的每个单元格只有 1 个项目/比较时，我已经想出了如何做到这一点。但我想将此扩展到每个以“，”分隔的单元格的多重比较。

这是每个单元格的单个项目的代码。https://jsfiddle.net/t19Lqbkn/ 使用以下代码：

 var table = document.getElementById("mytab1");
for (var i = 1, row; row = table.rows[i]; i++) {
     var matc = table.rows[1]
   for (var j = 0, col; col = row.cells[j]; j++) {
        if (col.innerHTML !== matc.cells[j].innerHTML){col.innerHTML = "<span style='color: red;'>" + col.innerHTML + "</span>";}


   }  
}

这是一个每个单元格包含多个项目的表格。 https://jsfiddle.net/6c7s9mky/

正如您在第二个链接中看到的那样。第二行的第一列，只有项目“Eve”应该是红色的，并且在第一列的最后一行应该没有红色文本。

标签： javascripthtml

解决方案

String 和 Array 有很多很酷的方法

这里有一个例子：

const base = "with,hello,string"
let comparison = "string,with,comma";
comparison = comparison.split(",").map(str => 
        base.indexOf(str) !== -1?`<span style="color:red;">${str}</span>`:str
    ).join(",");

您还可以找到使用 RegExp 的方法。

推荐阅读