Question

我无法找到这个问题的答案。

每个表格行应该是不同的颜色，从深蓝色到浅蓝色。这是一个site，它有一个像我想要创建的表。

我正在使用的网站是Wordpress，生成该表的插件是TablePress。这是表格的HTML：

＆＃13;

<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>

＆＃13;

我知道如何添加CSS渐变，但我需要每一行都有一个稍微亮一点的颜色，表格将有超过40行。这只是它的一个例子。有人可以帮忙吗？

如何使用JS创建具有渐变行的表？

0 个答案: