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

时间:2019-03-31 16:34:33

标签: 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/

如您在第二个链接中所见。第二行的第一列,只有“夏娃”项应该是红色的,第一列的最后一行中应该没有红色的文本。

1 个答案:

答案 0 :(得分:0)

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找到一种方法。