How to create table with a gradient rows using JS?

Question

I cant find an answer to this problem.

Each table row should be a different color, starting from dark blue to light blue. Here is a site that has a table like I want to create.

The site im working on is in Wordpress and plugin that generates the table is TablePress. Here is the HTML of table:

<div id="tablepress-1_wrapper" class="dataTables_wrapper no-footer">
  <table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer dtr-inline" role="grid" style="width: 1195px;">
    <thead>
      <tr class="row-1 odd">
        <th class="column-1 sorting_disabled">CPU Series</th>
        <th class="column-2 sorting_disabled">Memory</th>
        <th class="column-3 sorting_disabled">Default Drive</th>
        <th class="column-4 sorting_disabled">Bandwidth</th>
        <th class="column-5 sorting_disabled">Monthly</th>
        <th class="column-6 sorting_disabled">Availability</th>
      </tr>
    </thead>
    <tbody class="row-hover">
      <tr class="row-2 even" role="row">
        <td class="column-1">Intel® Atom® D525 DualCore 1.8 GHz </td>
        <td class="column-2">4GB DDR3 ECC</td>
        <td class="column-3">2 x 1 TB SATA</td>
        <td class="column-4">100Mbps guaranteed / Unmetered</td>
        <td class="column-5">€52,80</td>
        <td class="column-6">
          <a class="button" href="#" target="_blank"><span class="button_label">GET STARTED</span></a></td>
      </tr>
      <tr class="row-2 even" role="row">
        <td class="column-1">Intel® Atom® D525 DualCore 1.8 GHz </td>
        <td class="column-2">4GB DDR3 ECC</td>
        <td class="column-3">2 x 1 TB SATA</td>
        <td class="column-4">100Mbps guaranteed / Unmetered</td>
        <td class="column-5">€52,80</td>
        <td class="column-6">
          <a class="button" href="#" target="_blank"><span class="button_label">GET STARTED</span></a></td>
      </tr>
      <tr class="row-2 even" role="row">
        <td class="column-1">Intel® Atom® D525 DualCore 1.8 GHz </td>
        <td class="column-2">4GB DDR3 ECC</td>
        <td class="column-3">2 x 1 TB SATA</td>
        <td class="column-4">100Mbps guaranteed / Unmetered</td>
        <td class="column-5">€52,80</td>
        <td class="column-6">
          <a class="button" href="#" target="_blank"><span class="button_label">GET STARTED</span></a></td>
      </tr>
  </table>
</div>

<script>

    function blendRGBColors(c0, c1, p) {
        var f=c0.split(","),t=c1.split(","),R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);
        return "rgb("+(Math.round((parseInt(t[0].slice(4))-R)*p)+R)+","+(Math.round((parseInt(t[1])-G)*p)+G)+","+(Math.round((parseInt(t[2])-B)*p)+B)+")";
    }

    var row = document.getElementsByTagName("tr").length;
    var colorRGB1 = "rbg(63,131,163)";
    var colorRGB2 = "rbg(244,128,0)";
    var color = blendRGBColors(colorRGB1, colorRGB2, 0.75);
    for (var j = 1; j <= row; j++) {
        row[j].style.backgroundColor +=  color;
    }
</script>

I know how to add CSS gradient, but I need each row to have a slightly brighter color and the table will have more than 40 rows. This is just a sample of it. Can someone help?