javascript - 使用数组中的多个值范围填充 html 表

Question

我正在尝试使用数组中的“成本”值填充表。

例如单元格 1A - 1D 应显示价格 3.49 美元，2A - 6D 应显示 $6.59，7A - 10D 应显示 $1.99

它适用于最后一个范围(单元格 7A - 10D)，如我的 jsfiddle 中所示

非常感谢任何帮助。

JsFiddle:https://jsfiddle.net/Fraser_M/ct9Lm9er/

JS:

$(function () {
    var myArray = [{
        "range": ["1A", "1D"],
        "cost": 3.49,
        "group": "My group 1"
    }, {
        "range": ["2A", "6D"],
        "cost": 6.59,
        "group": "My group 2"
    }, {
        "range": ["7A", "10D"],
        "cost": 1.99,
        "group": "My group 3"
    }];

    var rows = $('.row').length;

    for (var i = 0; i < rows; i++) {
        // number each row 1-10
        var rowIndex = $('.row')[i].rowIndex + 1;
        console.log(rowIndex);
    }

    for (var i = 0; i < rows; i++) {
        // get range start number
        var rangeBegin = (myArray[i].range[0].replace(/\D/g, ''));

        // get range end number
        var rangeEnd = (myArray[i].range[1].replace(/\D/g, ''));

        console.log(rangeBegin, rangeEnd);

        if ((rowIndex >= rangeBegin) && (rowIndex <= rangeEnd)) {
            // Append values to table
            $('.row' + (rangeBegin - 1)).nextUntil('.row' + (rangeEnd + 1)).children().append("<br>$" + myArray[i].cost);
        }
    }
});

Answer 1

这是一种使用 <td> 集合来完成此操作的方法细胞和 slice() 过滤要填充的适当单元格的方法

基本概念是从 range 获取开始和结束索引选择器。

var $cells= $('td')

$.each(myArray, function(_,item){
    // index range elements within `$cells` collection
    var startIndex = $cells.index( $('#' + item.range[0]) ),
        lastIndex =  $cells.index( $('#' + item.range[1]) ) + 1;
    // slice and populate $cells
    $cells.slice(startIndex, lastIndex).append('<br>$' + item.cost);    
});

DEMO