javascript - 如何用一种颜色为内容相同的行着色？

Question

我有一个包含多行的表格(行号是可变的)。它显示用户的详细信息，如用户名和 IP 以及国家......

我想用相同的颜色显示具有相同 IP 的行。

但是内容不是静态的，也许我有两组相似的 IP 我怎样才能用一种颜色显示每组？

我尝试为每个 TR 的名称属性赋予 IP 的值，因此具有相同 IP 的所有组都具有相同的名称属性。

$txt .='<tr name="'.$ip.'"><td>'.$username.'</td><td>'.$ip.'</td><td>'.$country.'</td><td>'.$platform.'</td><td>'.$browser.'</td><td>'.$version.'</td><td>'.$os.'</td><td>'.$lastseen.'</td></tr>';

然后我用javascript给同名的背景颜色<tr>

<script>
$(document).ready(function(){
    $('table').find('tr').each(function(){
        ip = $(this).attr('name');
            $('table').find('tr').each(function(){
              ip1 = $(this).attr('name');
                  if(ip == ip1)
                  { $(this).css("background-color","red");}


             });
    });
});
</script>

行的颜色不断变化，如果我有两组相似的 IP，我不知道如何将它们分成不同的颜色？

Answer 1

您可以使用 ip 本身为行着色，方法是将 block 视为 RGB 值并将它们指定为行的背景色。

例如

 192.168.0.1
  R   G  B
 background-color: rgb (192,168,0) 

I have two groups of similar IPs

由于未指定similar

我只使用前 3 个 block 来计算颜色，因为这会将位于同一 /24 子网中的 ip 分组。

---

实际上分配这些值非常简单。

var table = document.getElementById ("ips");
var rows = table.querySelectorAll ("tr td");
for (var i=0,r=rows;i<r.length;i++) {
    var td = r[i];
    var ip = td.childNodes [0].data.replace (/\s/g,"");   //trim whitespaces
    var rgb = ip.split (".").slice (0,-1);                //get the first 3 blocks (RGB)
    td.style.background = "rgb(" + rgb + ")";             //[].toString () gives a comma seperated values string
}

这是一个简单的 example on JSFiddle ，产生这些颜色:

生成的颜色可能不像从预定义集合中随机选择的颜色那样漂亮，但这是确保共享相同 block 的 ips 以相同方式着色的简单方法。

---

编辑

正如@MohammedJoraid 所指出的，ips 的颜色分布在同一 block 中仅略有不同，在感知上很难区分。

如果您更改分布，问题不会消失，因为即使只考虑地址的前三个 block ，我们也已经覆盖了整个 rgb 范围。

但我们可以使用一种方法，通过使用 HSV 色彩空间而不是 RGB 来分配颜色，从而更容易区分上述 ips。

var table = document.getElementById("ips");
var rows = table.querySelectorAll("tr td");

for (var i = 0, r = rows; i < r.length; i++) {
    var td = r[i],
        ip = td.childNodes[0].data.replace(/\s/g, ""),
        rgb = ip.split(".").slice(0, -1); //get the first three blocks

    var h = rgb.reduce(function (a, b, i) {
        return a + (b * (0.103005665*(1+i*2))) //lastColor + (currentColor * (2*blockNr+1/6*phi)) Practically putting a weight on the blocks further to the right
    }, 0) % 1,
        s = 0.5,
        v = 0.85;

    td.style.background = "rgb(" + hsvToRgb(h, s, v) + ")"; //assign the calculated rgb value
}


function hsvToRgb(h, s, v) {
    var sec = ~~ (h * 6);
    var f = h * 6 - sec;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    var r = 0xFF,
        g = 0xFF,
        b = 0xFF;
    switch (sec) {
        case 0:
            r = v;
            g = t;
            b = p;
            break;
        case 1:
            r = q, g = v, b = p;
            break;
        case 2:
            r = p, g = v, b = t;
            break;
        case 3:
            r = p, g = q, b = v;
            break;
        case 4:
            r = t, g = p, b = v;
            break;
        case 5:
            r = v, g = p, b = q
    }
    return [~~ (r * 256), ~~ (g * 256), ~~ (b * 256)];
};

新方法按以下方式为表格着色

这是另一个 Fiddle