0

私はこのようなテーブルを作りたいのですが、すべてjqueryで、方法がわかりません;/

CSS:



    
    テーブル{

    幅:200px;

    高さ:200px;

    色:緑;

    }

    テーブルtd{

    パディング:2px;

    余白:2px;

    境界線:2px ソリッド #ccc;

    }

    体{

    背景色:白;

    }

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>
4

1 に答える 1