javascript - jQuery 颜色缩放 html 表列

Question

我正在努力为我拥有的数据表添加更好的可视化效果，以便该列中的最高数字将具有绿色 CSS 背景，而该列中的最低值将具有红色 CSS 背景。

我已经走了很远，我基本上已经到了最后一点。我是本地 PHP 开发人员，所以我可能搞砸了整数比较以及没有正确执行最终的 jQuery 选择器。代码选择同一列中的所有元素，找到最小值和最大值，计算步长值，并计算当前元素比最小值高多少步。我现在需要做的就是根据这些步骤应用一个 css 类。就像 0-5% 范围内的值将具有 css 组 0、5-10 将具有 css 组 1、10-15 组 2、95-100 组 20。所有这些 css 都在 fiddle 上。我成功地应用了一个 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');
});     

所以这两个问题是如何处理将 Range 传递给 switch 语句(或放弃并使用 ifs 和 else ifs)，以及以当前表格单元格为目标的正确选择器是什么。我有 my code on jsfiddle .

Answer 1

由于您的值范围从 0 到 100，并且您的组名称从 group0 到 group20，您可以做一些数学运算并完全放弃 switch/if 语句。

如果您得到 ( value/5 ) 的下限，则 0-4 为 0，5-9 为 1，... 95-99 为 19，100 为 20。

获取floor值后，可以将结果与组名拼接，添加结果clsas如下:

注意:您创建了一个带拼接的 vanilla JS 数组，因此您需要用 $( ) 包装 arr[i] 以将其转换为 jQuery 对象。

jsfiddle: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
    }