CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2898127
user2898127

Reputation:

Apply different colors to Dynamically generated row of HTML table

I've created dynamic table using HTML and javascript but rather than applying alternate color, I want to apply distinct color to each row. How can I do so?

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dynamic Page</title>
    </head>


    <body>
        <table>
            <tr>
                <td>Enter Rows</td>
                <td><input type="number" id="txtRows"/></td>
            </tr>
            <tr>
                <td>Enter Columns</td>
                <td><input type="number" id="txtCols"/></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" id="btnDisplay" value="Display" onClick="createTable();"/></td>
            </tr>
        </table>
        <table id="tbl_DynamicTable" border="1">
        </table>
    </body>

    <script type="text/javascript">
        function createTable()
        {
          debugger;
            var rows = document.getElementById("txtRows").value;
            var cols = document.getElementById("txtCols").value;
            var table = document.getElementById("tbl_DynamicTable");
            var str="";
            for(var i=0;i<rows;i++)
            {
                str += "<tr id=row" + i +">";

                //r = document.getElementById('tbl_DynamicTable').getElementsByTagName('<tr>');
                //r.bgColor = colours[(i%k)/group | 0];

                //mycurrent_row.style.backgroundColor = "#EEF4EA";
                //mycurrent_row.style.backgroundColor =colours[(i%k)/group | 0];

                for(var j=0;j<cols;j++)
                {
                    if(i==0)
                    {
                        str += "<th> Header " + j + "</th>";
                    }
                    else
                    {
                        str += "<td> Row " + i + ", Cell "+ j + "</td>";
                    }
                }
                str += "</tr>";             
            }           
            table.innerHTML = str;
        }       


        $("tr").style("bgcolor","red");     
    </script>
</html>

I don't know how to use jQuery with HTML page. I'm new to this. So if possible please let me know what is needed to include in this too.

Upvotes: 2

Views: 5629

Answers (2)

Donovan Charpin
Donovan Charpin

Reputation: 3397

You have many way to create a random color.

Use these example :

JAVASCRIPT

'#'+Math.floor(Math.random()*16777215).toString(16);

jQuery

(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
  s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)

And add this hexa random color on your TR when you generate it

HTML

<table border="1">
  <tr bgcolor="#FF0000">
                  ^ Here
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Other example on http://www.paulirish.com/2009/random-hex-color-code-snippets/

Upvotes: 4

geevee
geevee

Reputation: 5451

javascript approach (i suggest including jQuery):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

// paint rows on document ready
$(function(){
    paint_rows();
});

function paint_rows() {
    $('#table_id tr').each(function(){
            $(this).css('color', get_random_color());
    });
}
</script>

just make sure to add enough color values into the array colors (can use hex values as well).

and, you can call the function paint_rows() whenever needed of course.

hope that helps.

Upvotes: 2

Related Questions