Table with colors [jquery]

Question

I want to made a table like this but ALL in jquery, and i have no idea how ;/

Css:



    
    table{

    width:200px;

    height:200px;

    color:green;

    }

    table td{

    padding:2px;

    margin:2px;

    border:2px solid #ccc;

    }

    body{

    background-color:white;

    }

JavaScript:

<script>


function split(elem) {


   var tekst = $(elem).text();



   $('body').css({"background-color" : tekst});





};


function change(x){


var tekst = $(x).text();



   $(x).css({"background-color" : "black"});

   $(x).css({"color" : tekst});


};


function changeback(x){


var tekst = $(x).text();


   $(x).css({"background-color" : tekst});

   $(x).css({"color" : "green"});


};


$(document).ready(function() {


createTable(7,4);


function createTable(rows,cols){


mytable = $('<table></table>').attr({ id: "Tabela1" });

       var b = 255;

       var r = 255;

       var g = 255;



   for (var i = 0; i < rows; i++) {

       var row = $('<tr></tr>').appendTo(mytable).attr({ id: i+1 });





           for (var j = 0; j < cols; j++) {

               $('<td></td>').text("rgb("+r+","+g+","+b+")").attr
               ({ 
               id: j+1,onclick:"split(this)",
               onmouseover:"change(this)",
               onmouseout:"changeback(this)" }).css({"background-color" : 'rgb('+r+','+g+','+b+')'}).appendTo(row);

               g-=30;

           }

       g = 255;



       if((i/3)<1) r -=43;

       else r-=42;



   }


mytable.appendTo("#box");


}}



);


</script>

HTML:

<html>
<body>
<div id="box">

</div>  
</body>
</html>

Okay, have you read through the jQuery API, or their learning center? And there's quite a lot of jQuery in there already, what parts are you trying to remove? And why? — David Thomas
i need to do everything in jquery, maybe something could be change for more funcionality? — Adam

Mottie Mottie · Accepted Answer · 2013-04-14T18:54:57

I hope you understand that jQuery IS javascript.

I've cleaned up the inline javascript so all of the functions grouped together (demo):

$(function () {
    createTable(7, 4);

    function createTable(rows, cols) {
        var $body = $('body'),
            mytable = $('<table></table>').attr({
                id: "Tabela1"
            }),
            r = 255,
            g = 255,
            b = 255,
            i, $row;
        for (i = 0; i < rows; i++) {
            $row = $('<tr></tr>').appendTo(mytable).attr({
                id: i + 1
            });
            for (var j = 0; j < cols; j++) {
                $('<td></td>', {
                    text: "rgb(" + r + "," + g + "," + b + ")",
                    id: j + 1,
                    css: {
                        "background-color": 'rgb(' + r + ',' + g + ',' + b + ')'
                    }
                }).appendTo($row);
                g -= 30;
            }
            g = 255;
            r -= ((i / 3) < 1) ? 43 : 42;
        }
        mytable.appendTo("#box");
        mytable.find('td').on('click mouseover mouseleave', function (e) {
            var $t = $(this),
                color = $t.text();
            switch (e.type) {
                case 'click'     :  $body.css({ 'background-color': color }); break;
                case 'mouseover' : $t.css({ 'background-color': 'black', color: color }); break;
                case 'mouseleave': $t.css({ 'background-color': color, color: 'green' }); break;
            }
        });
    }

});

Table with colors [jquery]

1 Answers