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

Question

I'm trying to populate the table with the "cost" values from the array.

eg cells 1A - 1D should display the price $3.49, 2A - 6D should display $6.59, and 7A - 10D should display $1.99

It's working for the last range (cells 7A - 10D) as seen in my jsfiddle

Any help is much appreciated.

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

Here's a way to do it using a collection of <td> cells and slice() method to filter the appropriate cells to populate

Basic concept is to get beginning and ending indices from the range selectors.

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

Answer 2

Loop through starting row to ending row and inside this loop through A to D using ASCII value like following.

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"
}];


$.each(myArray, function () {
    var start = this.range[0].slice(0, -1) * 1; // get starting row num
    var end = this.range[1].slice(0, -1) * 1;   // get ending row num

    for (var i = start; i <= end; i++) { //loop through starting row to ending row
        for (var j = 65; j <= 68; j++) { //loop through 'A' to 'D'
            $('#' + i + String.fromCharCode(j)).append('<br/>$' + this.cost);
        }
    }
});

FIDDLE

Answer 3

 $(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; var rowIndex = 0; for (var i = 0; i < rows; i++) { // number each row 1-10 rowIndex = $('.row')[i].rowIndex + 1; console.log(rowIndex); } for (var i = 0; i < rows; i++) { // get range start row number var rangeBegin = (myArray[i].range[0].replace(/\\D/g, '')); // get range end row number var rangeEnd = (myArray[i].range[1].replace(/\\D/g, '')); rangeEnd = parseInt(rangeEnd) +1; console.log(rangeBegin, rangeEnd); if ((rowIndex >= rangeBegin) || (rowIndex <= rangeEnd)) { $('.row' + (rangeBegin)).children().append("<br>$" + myArray[i].cost); $('.row' + (rangeBegin)).nextUntil(".row"+rangeEnd).children().append("<br>$" + myArray[i].cost); } } }); 

  td { border: 1px solid black; padding: 2px 10px 2px 10px; text-align: center; border-radius: 2px; } 

 <table> <tr class="row row1"> <td class='m' id='1A'>1A</td> <td class='m' id='1B'>1B</td> <td class='m' id='1C'>1C</td> <td class='m' id='1D'>1D</td> </tr> <tr class="row row2"> <td class='m' id='2A'>2A</td> <td class='m' id='2B'>2B</td> <td class='m' id='2C'>2C</td> <td class='m' id='2D'>2D</td> </tr> <tr class="row row3"> <td class='m' id='3A'>3A</td> <td class='m' id='3B'>3B</td> <td class='m' id='3C'>3C</td> <td class='m' id='3D'>3D</td> </tr> <tr class="row row4"> <td class='m' id='4A'>4A</td> <td class='m' id='4B'>4B</td> <td class='m' id='4C'>4C</td> <td class='m' id='4D'>4D</td> </tr> <tr class="row row5"> <td class='m' id='5A'>5A</td> <td class='m' id='5B'>5B</td> <td class='m' id='5C'>5C</td> <td class='m' id='5D'>5D</td> </tr> <tr class="row row6"> <td class='m' id='6A'>6A</td> <td class='m' id='6B'>6B</td> <td class='m' id='6C'>6C</td> <td class='m' id='6D'>6D</td> </tr> <tr class="row row7"> <td class='m' id='7A'>7A</td> <td class='m' id='7B'>7B</td> <td class='m' id='7C'>7C</td> <td class='m' id='7D'>7D</td> </tr> <tr class="row row8"> <td class='m' id='8A'>8A</td> <td class='m' id='8B'>8B</td> <td class='m' id='8C'>8C</td> <td class='m' id='8D'>8D</td> </tr> <tr class="row row9"> <td class='m' id='9A'>9A</td> <td class='m' id='9B'>9B</td> <td class='m' id='9C'>9C</td> <td class='m' id='9D'>9D</td> </tr> <tr class="row row10"> <td class='m' id='10A'>10A</td> <td class='m' id='10B'>10B</td> <td class='m' id='10C'>10C</td> <td class='m' id='10D'>10D</td> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 

Answer 4

Solution with a single for loop:

$(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;
    var rangeObj = {        // set of number limits
      'group1': [myArray[0].range[0][0], myArray[0].range[1][0]], 
      'group2': [myArray[1].range[0][0], myArray[1].range[1][0]], 
      'group3': [myArray[2].range[0][0], myArray[2].range[1].substr(0,2)]
    };

  var rowIndex = 0;
  for (var i = 0; i < rows; i++) {
    var currentIndex = $('.row')[i].rowIndex + 1;
    if (rowIndex > currentIndex) {
        continue;       // bypass redundant iterations
        } else {
        rowIndex = currentIndex;
    }

    var groupIndex = 0;
    if ((rowIndex >= rangeObj.group1[0]) && (rowIndex <= rangeObj.group1[1])){
        groupIndex = '1';    
    } else if ((rowIndex >= rangeObj.group2[0]) && (rowIndex <= rangeObj.group2[1])) {
        groupIndex = '2';
    } else if ((rowIndex >= rangeObj.group3[0]) && (rowIndex <= rangeObj.group3[1])) {
        groupIndex = '3';
    }

    // get range start row number
    var rangeBegin = parseInt(rangeObj['group' + groupIndex][0]);

    // get range end row number
    var rangeEnd = parseInt(rangeObj['group' + groupIndex][1]);

    //console.log(rangeBegin, rangeEnd);
        var startClass = (rangeBegin - 1)? (rangeBegin - 1) : 1;
    if ((rowIndex >= rangeBegin) && (rowIndex <= rangeEnd)) {
        if (rowIndex === 1) $('.row' + startClass).children().append("<br>$" + myArray[parseInt(groupIndex) - 1].cost);  
        $('.row' + startClass).nextUntil('.row' + (rangeEnd + 1)).children().append("<br>$" + myArray[parseInt(groupIndex) - 1].cost);
        rowIndex = rangeEnd + 1;
    }
  }

});

https://jsfiddle.net/272kk7yx/