jQuery颜色缩放html表列

Question

我正在努力在数据表中添加更好的可视化功能，这样该列中最高的数字将具有绿色的CSS背景，而该列中的最低值将具有红色的CSS背景。

我已经走得很远了，基本上是最后一点了。我是一个本地PHP，所以我可能搞砸了整数比较，并且没有正确地完成最终的jQuery选择器。代码选择同一列中的所有元素，查找min和max，计算步骤值，并计算当前元素的最小值以上的步骤数。现在我需要做的就是根据这些步骤应用css类。它的数值在0-5%范围内将有css组0，5-10将有css组1，10-15组2，95-100组20。我成功地应用了一个CSS类，但没有应用到单个单元格中，它对整个列都是如此。

$(document).on('click', '#dvData td.color', function() {
    var ndx = $(this).index() + 1;
    //alert('Val of ndx: ' + ndx);
    var thisCol = $('#dvData td:nth-child(' +ndx+ ')');
    var arr = thisCol.slice(1, thisCol.length);

    var columnDataArr = new Array();
    alert("Number of rows: " + arr.length);
        //alert("First Row: " + arr[0].innerHTML);
    for(var i = 0, x = arr.length; i < x; i++){
        columnDataArr[i] = arr[i].innerHTML;
    }
    var colorsArray = ["63BE7B","72C27B","82C77C","91CB7D","A1D07E","B1D47F","C0D980","D0DD81","DFE282","EFE683","FFEB84","FFDE82","FED280","FDC47D","FDB87B","FCAA78","FB9D75","FB9073","FA8370","F9776E","F8696B"];

    var max = Math.max.apply(Math, columnDataArr),
        min = Math.min.apply(Math, columnDataArr),
        range = max - min,
        step_val = range/100;
        alert("Step Value:" + step_val);

    for(var i = 0, x = arr.length; i < x; i++){
        var thisPercentile = parseInt((columnDataArr[i] - min) / step_val);
        alert("Percentile:" + thisPercentile);     
        switch ( thisPercentile ) {
            // yes this looks terrible, but i can't seem to get the case to work
            // with: case(thisPercentile) <= 5:
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
                alert("Below 10th Percentile");
                break;
            case parseInt(90):
                alert("90th Percentile");
                //arr[2].addClass('group10') // doesn't work
                break;
        }
    }
    arr.addClass('group20');
});     

因此，这两个问题是如何处理如何将范围传递给switch语句(或放弃并使用ifs和else ifs)，以及正确的选择器是针对当前表单元格的。我有我在弹琴上的代码。

Answer 1

由于您的值范围为0-100，而您的组名来自group0-group20，所以您可以做一些计算，完全放弃开关/if语句。

如果得到( value /5 )的底数，0-4为0，5-9为1，95-99为19,100为20。

在获得楼面值之后，您可以将结果与组名连接起来，并添加结果clsas，如下所示：

注意:您创建了一个带有剪接的普通JS数组，因此您需要用$( )包装arri，才能将其转换为jQuery对象。

小提琴手：http://jsfiddle.net/7Luwyyxr/2/

    for(var i = 0, x = arr.length; i < x; i++){
        var thisPercentile = parseInt((columnDataArr[i] - min) / step_val);
        alert("Percentile:" + thisPercentile);     

        // added this stuff
        var gnum = Math.floor( thisPercentile/5 );  // returns 0 for 0-4, 1 for 5-9, ...
        //alert("Group Num: " + gnum);
        $(arr[i]).addClass('group'+gnum);  // appends class to array index
    }

Answer 2

此解决方案将区分20个不同的数字，然后再分配两个数字相同的颜色。它使用百分位数(例如，它大于或等于的项的百分比)来分配颜色。最高值总是得到相同的类，最低值总是得到相同的类。两者之间的数字将相互依赖，以获得分配的类。

for(var i = 0, x = columnDataArr.length; i < x; i++){
    var greaterThan = 0;
    var curNum = columnDataArr[i];
    for(var j = 0, x = columnDataArr.length; j < x; j++){
        if(curNum <= columnDataArr[j]){
            greaterThan += 1;
        }

    }

    var percentile = Math.round((greaterThan*100)/columnDataArr.length);
    var group = Math.round(percentile/5);
    $(arr[i]).addClass('group'+group);
}

下面是一把小提琴：http://jsfiddle.net/7Luwyyxr/4/