CODEWITHSUNDEEP
javascript
Bohdan Ilkiv
Bohdan Ilkiv

Reputation: 143

Connect the javascript to multiple tables

I have a working js code, but he working only with one table with id 'heatmap'. How I can modify the code so that he could work with many tables, for example, table with class name 'heatmap'?

var table = document.getElementById('heatmap');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

var arrMin = 1000000;
var arrMax = 0;

for (var i = 0, len = cells.length; i < len; i++) {
    var tdData = parseInt(cells[i].innerHTML, 10);

    if (tdData == 0) {
    }
    else
        if (tdData < arrMin) {
            arrMin = tdData;
        }
        else
            if (tdData > arrMax) {
                arrMax = tdData;
            }

}

var step = (arrMax - arrMin) / 10;

for (var i = 0, len = cells.length; i < len; i++) {


    if (parseInt(cells[i].innerHTML, 10) == 0) {
        cells[i].style.backgroundColor = 'white';
    }

    if (parseInt(cells[i].innerHTML, 10) >= (arrMin)) {
        cells[i].style.backgroundColor = 'yellow';
    }

    if (parseInt(cells[i].innerHTML, 10) > (arrMin + step)) {
        cells[i].style.backgroundColor = 'orange';
    }

    if (parseInt(cells[i].innerHTML, 10) > (arrMin + step * 2)) {
        cells[i].style.backgroundColor = 'red';
    }


}

Upvotes: 0

Views: 82

Answers (3)

TimTIM Wong
TimTIM Wong

Reputation: 818

Suppose there are many <table class="heatmap">.

For modern browsers: note the . in front of heatmap for class name

document.querySelectorAll(".heatmap").forEach(table => {
    var tbody = table.querySelector("tbody"); // first <tbody> under table
    // rest of your code
});

For older browsers:

Array.prototype.map.call(document.getElementsByClassName("heatmap"), function(table) {
    var tbody = table.getElementsByTagName('tbody')[0];
    // rest of your code
});

Upvotes: 1

Barmar
Barmar

Reputation: 781503

Put the code in a loop that processes all the elements matching the selector.

var tables = document.querySelectorAll('.heatmap');
tables.forEach(table => {
  var tbody = table.getElementsByTagName('tbody')[0];
  var cells = tbody.getElementsByTagName('td');

  var arrMin = 1000000;
  var arrMax = 0;

  for (var i = 0, len = cells.length; i < len; i++) {
    var tdData = parseInt(cells[i].innerHTML, 10);

    if (tdData == 0) {} else
    if (tdData < arrMin) {
      arrMin = tdData;
    } else
    if (tdData > arrMax) {
      arrMax = tdData;
    }
  }

  var step = (arrMax - arrMin) / 10;

  for (var i = 0, len = cells.length; i < len; i++) {
    if (parseInt(cells[i].innerHTML, 10) == 0) {
      cells[i].style.backgroundColor = 'white';
    }

    if (parseInt(cells[i].innerHTML, 10) >= (arrMin)) {
      cells[i].style.backgroundColor = 'yellow';
    }

    if (parseInt(cells[i].innerHTML, 10) > (arrMin + step)) {
      cells[i].style.backgroundColor = 'orange';
    }

    if (parseInt(cells[i].innerHTML, 10) > (arrMin + step * 2)) {
      cells[i].style.backgroundColor = 'red';
    }
  }
});

Upvotes: 1

Seyi Daniel
Seyi Daniel

Reputation: 2379

Make a function out of you code with appropriate parameters. Call the function with required arguments whenever you need it. You may read more about JS functions here https://www.w3schools.com/js/js_functions.asp

Upvotes: 0

Related Questions