generate a data table with rainbow colors of a restaurant menu and prices in javascript

To generate a data table with rainbow colors of a restaurant menu and prices in javascript, you can use the following code:

HTML:


<table id="menu">
    <thead>
        <tr>
            <th>Menu Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>$5.99</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>$7.99</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>$10.99</td>
        </tr>
    </tbody>
</table>
409 chars
23 lines

JavaScript:


index.tsx
const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'];
const rows = document.querySelectorAll('#menu tbody tr');

for (let i = 0; i < rows.length; i++) {
    rows[i].style.backgroundColor = colors[i % colors.length];
}
258 chars
7 lines

In this code, we define an array colors with rainbow colors. We also select all rows in the table's tbody and loop over them to apply a color from the colors array to each row. We use the modulo operator (%) to cycle through the array of colors, so if there are more rows than colors, the colors will repeat.

You can adjust the code to match the format of your specific restaurant menu and prices.

similar javascript code snippets

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

generate a web form that stores first name, last name, phone number, address. every row should be displayed in a data table in javascript

create an image of a rainbow with css in javascript

let user input grades, and display them in a table in svelte, at the start of the program fetch data from storage if available, and every time the user inputs something store it in json locally in javascript

create a http server and read the request body as multipart form data in javascript

how to parse a json string in javascript

loop in javascript

how to use useeffect in javascript

how to create fibonacci in javascript

how to create a proxy variable in javascript

related categories