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

0

我希望你明白 jQuery 就是 javascript。

我已经清理了内联 javascript，因此所有函数都组合在一起（演示）：

$(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;
            }
        });
    }

});
于 2013-04-14T18:54:57.810 回答