some sample data in an html table with rainbow colors in javascript

Here's an example code snippet to create an HTML table with rainbow colors using JavaScript:


<!DOCTYPE html>
<html>
<head>
  <style>
    /* Define rainbow color classes */
    .red { background-color: red; }
    .orange { background-color: orange; }
    .yellow { background-color: yellow; }
    .green { background-color: green; }
    .blue { background-color: blue; }
    .indigo { background-color: indigo; }
    .violet { background-color: violet; }
  </style>
</head>
<body>

<table id="myTable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th> 
    <th>Column 3</th>
  </tr>
</table>

<script>
// Sample data
var data = [
  ['A', 'B', 'C'],
  ['D', 'E', 'F'],
  ['G', 'H', 'I']
];

// Get table element
var table = document.getElementById('myTable');

// Loop through data rows
for (var i = 0; i < data.length; i++) {

  // Create new row element
  var row = document.createElement('tr');

  // Loop through columns
  for (var j = 0; j < data[i].length; j++) {

    // Create new cell element
    var cell = document.createElement('td');

    // Set cell content
    cell.textContent = data[i][j];

    // Add rainbow color class based on column index
    switch (j) {
      case 0:
        cell.classList.add('red');
        break;
      case 1:
        cell.classList.add('orange');
        break;
      case 2:
        cell.classList.add('yellow');
        break;
      case 3:
        cell.classList.add('green');
        break;
      case 4:
        cell.classList.add('blue');
        break;
      case 5:
        cell.classList.add('indigo');
        break;
      case 6:
        cell.classList.add('violet');
        break;
    }

    // Add cell to row
    row.appendChild(cell);
  }

  // Add row to table
  table.appendChild(row);
}
</script>

</body>
</html>
1687 chars
87 lines

In this example, we define rainbow color classes using CSS, and then add the appropriate class to each cell based on its column index. The rainbow colors are applied in the CSS, which applies the appropriate background color to each cell.

similar javascript code snippets

create a div that scrolls horizontally and adjust the height of its content to always be 80% of the screen height in javascript

create a div that scrolls horizontally and adjust its height to always be 80% of the screen height in javascript

how to float an html element horizontally but fix it vertically in javascript

create a div of images that is always no bigger than 80% of the display height and the images scale accordingly. when you hover over an image it zooms slighly and the other images gray out in javascript

create a button in javascript

html to image in javascript

wrap li items within span in javascript

create a textbox in javascript

convert div to image in javascript

create a carousel in html in javascript

related categories