Zebra table in gray and white

Asked

Viewed 42 times

1

I’m solving a college exercise, and I’m having trouble passing the exact color to a zebra table.

I did the function this way, but when the table is built, it is coming out in green and yellow:

function rowValue(list) {
    for (var i = 0; i < list.length; i++) {
        if (i % 2 == 0) {
            list[i][5] = '#4F4F4F';
        }
        else {
            list[i][5] = '#FFFFFF';
        }

    }
}

And mounting the table in this way: 

function buildTable(list, id) {
    var html = "<thead> " +
        " <tr> " +
        " <th scope='col'>Proprietário</th> " +
        " <th scope='col'>Endereço</th> " +
        " <th scope='col'>Valor</th>" +
        " <th scope='col'>Aluguel</th>" +
        " <th scope='col'>Taxa</th>" +
        " </tr>" +
        "</thead>" +
        "<tbody>";

    rowValue(list);
    for (var i = 0; i < list.length; i++) {

        html += "<tr bgcolor = " + list[i][5] + ";>" +
            "<td>" + list[i][0] + "</td>" +
            "<td>" + list[i][1] + "</td>" +
            "<td>" + list[i][2] + "</td>" +
            "<td>" + list[i][3] + "</td>" +
            "<td>" + list[i][4] + "</td>" +
            "</tr>";
    }

    html += "</tbody>";
    document.getElementById(id).innerHTML = html;
}
javascript html

  • Welcome to Stackoverflow Ravel. Friend, what’s your question? Try to be clearer and more objective. Thanks!

  • Thank Felipe, thank you! I am with the problem in which the colors of the table come out in green and yellow, not in gray in white as I determined in the creation of the function, I looked in several sites to see if I was wrong in hexadecimal.

  • Why reinvent the wheel ? You can give this style "zebrado" by css using the pseudo selector :nth-child(odd) or :nth-child(even)

  • @Isac, we are doing exercises to train the use of functions and have more familiarity with the language! Thanks for the tip!

1 answer

3


Your error is in the semicolon ; that you are joining to hexadecimal:

html += "<tr bgcolor = " + list[i][5] + ";>" +
                                         ↑

Is resulting in invalid value, this way:

bgcolor="#4F4F4F;"
                ↑

When the right thing would be:

bgcolor="#4F4F4F"

Then just remove the ;:

function rowValue(list) {
    for (var i = 0; i < list.length; i++) {
        if (i % 2 == 0) {
            list[i][5] = '#4F4F4F';
        }
        else {
            list[i][5] = '#FFFFFF';
        }

    }
}

function buildTable(list, id) {
    var html = "<thead> " +
        " <tr> " +
        " <th scope='col'>Proprietário</th> " +
        " <th scope='col'>Endereço</th> " +
        " <th scope='col'>Valor</th>" +
        " <th scope='col'>Aluguel</th>" +
        " <th scope='col'>Taxa</th>" +
        " </tr>" +
        "</thead>" +
        "<tbody>";

    rowValue(list);
    for (var i = 0; i < list.length; i++) {

        html += "<tr bgcolor = " + list[i][5] + ">" +
            "<td>" + list[i][0] + "</td>" +
            "<td>" + list[i][1] + "</td>" +
            "<td>" + list[i][2] + "</td>" +
            "<td>" + list[i][3] + "</td>" +
            "<td>" + list[i][4] + "</td>" +
            "</tr>";
    }

    html += "</tbody>";
    document.getElementById(id).innerHTML = html;
}

var lista = [
   ['a','b','c','d','e'],
   ['a','b','c','d','e']
];
buildTable(lista,'teste');
<table id="teste"></table>

  • Thank you so much! I was thinking there was some mistake in my logic!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.