带颜色的表格 [jquery]答案

【问题标题】：Table with colors [jquery]带颜色的表格 [jquery]
【发布时间】：2013-04-06 19:41:05
【问题描述】：

我想在 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>

【问题讨论】：

好的，你读过jQuery API，或者他们的learning center吗？那里已经有很多 jQuery，你想删除哪些部分？ 为什么？
为什么要包含 jquery 文件两次？
我需要在 jquery 中做所有事情，也许可以改变一些东西以获得更多功能？

标签： jquery colors html-table

【解决方案1】：

我希望你明白 jQuery 就是 javascript。

我已经清理了内联 javascript，以便将所有函数组合在一起 (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;
            }
        });
    }

});

【讨论】：

只是为了一定的清晰度，为什么不'rgb(' + [r,g,b].join() +'); 减少一点字符串连接。