Question

我有一个包含多行的表（行号可以更改）。它显示用户详细信息，如用户名和IP以及国家/地区....

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

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

我试图给每个TR的name属性赋予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本身为行着色，方法是将块视为RGB值并将其指定为行的背景颜色。

例如

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

我有两组相似的IP

由于未指定类似的

我只使用前3个块来计算颜色，因为这会将ips组合在同一个/24子网中。

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

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，产生这些颜色：

生成的颜色可能不会像从预定义的集合中随机选择的颜色那样美观，但它是一种简单的方法来确保ips，共享相同的块以相同的方式着色。

修改的

正如@MohammedJoraid指出的那样，ips的颜色分布在同一个区块中略有不同，在理论上很难区分。

如果更改分布，问题不会消失，因为我们已经覆盖整个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

Answer 2

您必须使用以下步骤执行此操作：

检查哪些IP都可用

为每个IP创建随机颜色

将颜色应用于html元素

这个代码看起来像这样：

$(document).ready(function(){
    // First read all available IP addresses
    var ips = [];

    $('table').find('tr').each(function(){
        ip = $(this).attr('name');
        if (ips.indexOf(ip) == -1)
            ips.push(ip);
    });

    // Now create some colors for the ips
    var colors = [];
    for (var i = 0; i < ips.length; i++) {
        var color = get_random_color(); // Create some random color here
        colors.push(color);
    }

   // Last step, apply colors to rows
   $('table').find('tr').each(function(){
        var ip = $(this).attr('name');
        var color = colors[ips.indexOf(ip)];
        $(this).css("background-color", color);
   });
});


function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

Answer 3

我使这个功能尽可能通用，以适应更多场景。 JS FIDDLE

RESULT

通过指定表数据的类名，可以为具有相同值的任何表行着色。您可以搜索by class name，也可以在IP中添加一个类 <td class="_ip">使查找ip字段更容易。

var ips = $("._ip"); // get an array of all <td> with _ip class. 
var ip_color = {};//object to save ips with their color
//loop thru all td with the class_ip
$.each(ips, function(index, table_data) {
    var ip = $.trim($(table_data).html());//table_data is the actual <td>
    var color = getColor();
    if (!ip_color[ip])
    {    //use the ip as the object key, therefore we will end up with unique ips. 
        ip_color[ip] = {"color": color, "ref": [table_data]};// add a color and an array of td associated with an ip
    }
    else
    {
        ip_color[ip]["ref"].push(table_data);// we already have the color, we just add the td
    }
});
// here we give each tr a color
$.each(ip_color, function(ip, details) {    //loop thru all unique ips   
    $.each(details.ref, function(index, td) {// loop thru all td
         $(td).closest('tr').css({'background-color': details.color});
    });       
});
function getColor()
{
    return '#' + ('000000' + parseInt(Math.random() * (256 * 256 * 256 - 1)).toString(16)).slice(-6);
}

Answer 4

首先从trs中找到唯一的ips，然后相应地更改颜色。 js就像

var ips = [];

$('table').find('tr').each(function(){
    ip = $(this).attr('name');

    ips.push(ip);
});

ips = jQuery.unique(ips);
var colors = ['red','blue','green'];
var ie = 0;

$.each(ips,function(i,e) {
     if(ie > colors.length-1)
          ie = 0;

     $('table tr[name="' + e + '"]').css('background-color',colors[ie]);
       ie++;

});

您可以在http://jsfiddle.net/DhqQ5/

中找到示例

如何使用一种颜色为具有相同内容的行着色？

4 个答案: