Change the color of a row in table, html

Question

I want to make a table using html and css. But my problem is that I want the table to have the rows in 2 colors, one orange and one white....I use javascript to fill the table. But i cant change the color in the second case.. What sintax should i use to change th ecolor of row when using Javascript, because it gives me an error...My code is below:

<table>
        <tr>
            <th>Account Type</th>
            <th>Minimun Required</th>
            <th>Rate</th>
            <th>Compounded</th>

        </tr>
                <!--To fill the table with javascript-->
            <script >
                for (var j=0;j<col1.length;j++){
                    if (j%2==0) {
                        document.write("<tr><td>"  + col1[j] + " </td>");
                        document.write("<td>" + col2[j] + "</td>");
                        document.write("<td>" + col3[j] + "</td>");
                        document.write("<td>" + col4[j] + "</td></tr>");
                            }
                    else
                    { 
                document.write("<tr bgcolor="#d9531e"><td>"  + col1[j] + " </td>");
                                document.write("<td>" + col2[j] + "</td>");
                document.write("<td>" + col3[j] + "</td>");
                document.write("<td>" + col4[j] + "</td></tr1>");
                }}

            </script>

        </table>

and the error is at this line:

document.write("<tr bgcolor="#d9531e"><td>"  + col1[j] + " </td>");

Thank you!

Answer 1

You're trying to nest double-quotes inside a double-quoted string literal. You need to either escape them as \\" :

document.write("<tr bgcolor=\"#d9531e\"><td>"  + col1[j] + " </td>");

...or use single quotes:

document.write("<tr bgcolor='#d9531e'><td>"  + col1[j] + " </td>");

(Not that I recommend using document.write() .)

Note that it is generally considered best practice to set colours using CSS. You can add the following to your stylesheet:

tr:nth-child(even) {
  background-color: #d9531e;
}

...and it will automatically do the every-second-row colour for you as shown here: http://jsfiddle.net/rUK8a/

Answer 2

Well one problem is that you are using the same type of quotes -- you want to use different ones so don't terminate your string constant. You can see in the syntax color the problem.

 document.write("<tr bgcolor='#d9531e'><td>"  + col1[j] + " </td>");

Answer 3

You are getting an error because you have un-escaped quotes inside of your write() function. Try this instead:

document.write("<tr bgcolor=\"#d9531e\"><td>"  + col1[j] + " </td>");

or use different quotes, like:

document.write("<tr bgcolor='#d9531e'><td>"  + col1[j] + " </td>");

or you can even get away with no quotes at all as long as there are no spaces. I don't recommend this method:

document.write("<tr bgcolor=#d9531e><td>"  + col1[j] + " </td>");

In general, since the only difference is the color of the row, I would encourage you to take columns 2-4 outside of the if-else statement so you don't need to write them twice.

Answer 4

Use inline table tags to color a particular row. You must escape double quotes or need to use opposite quotes.

    document.write("<tr bgcolor=\"color code\"><td></td>...</tr>");  // use \ to escape double quote

or 

    document.write("<tr bgcolor='color code'><td></td>...</tr>");  // use ' inside the " .