js调色板【修改版】

项目中需要用到调色板，从网上找了些实例，与自己的需要有些差距，更改了下，哈哈...站在巨人的肩膀上...span.search
        {
            display: inline-block;
            margin: 0px;
            padding: 0px;
            height: 22px;
            width: 307px;
            background-image: url('../img/icon/Palettes_16_16.gif');
            background-repeat: no-repeat;
            background-position: 285px center;
            border: solid 1px #bbbbbb;
        }
        span.search input
        {
            margin: 0px;
            padding: 0px;
            border: none 0px;
            height: 18px;
            width: 270px;
            line-height: 18px;
            background-color: Transparent;
            padding-left: 3px;
        }
        span.search a.search-command
        {
            display: inline-block;
            width: 20px;
            height: 18px;
            cursor: pointer;
        }
        
        .bccolor
        {
         height:12px;
        
        }
        
          .bccolor td
          {
           width:11px;
          } <span class="search">
        <input id="Text2" type="text" value="英文名" alt="clrDlg1" readonly="readonly" />
        <a class="search-command" alt="clrDlg" readonly="readonly" onclick="OnDocumentClick()" href="#"></a></span>
    <input id="Button3" type="button" value="确定修改" class="button_1" style="margin-left: 17px;" />
    <div id="colorpanel" style="position: absolute; display: none; width: 253px; height: 177px;">
    </div>  <script type="text/javascript">        var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
        var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF')
        var current = null        /*
        * 画颜色表格
        */
        function intocolor() {
            var colorTable = ''
            for (i = 0; i < 2; i++) {
                for (j = 0; j < 6; j++) {
                    colorTable = colorTable + '<tr class="bccolor">'
                    colorTable = colorTable + '<td style="background-color:#000000" />'                    if (i == 0) {
                        colorTable = colorTable + '<td  style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '" />'
                    }
                    else {
                        colorTable = colorTable + '<td style="background-color:#' + SpColorHex[j] + '" />'
                    }
                    colorTable = colorTable + '<td  style="background-color:#000000" />'
                    for (k = 0; k < 3; k++) {
                        for (l = 0; l < 6; l++) {
                            colorTable = colorTable + '<td  style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '" />'
                        }
                    }
                    colorTable = colorTable + '</tr>';
                }
            }
            colorTable = '<table  cellspacing="0" cellpadding="0" style="border: 1px #000000 solid; border-bottom: none;border-collapse: collapse; width: 253px; border: 0" bordercolor="#000000" bordercolor="#000000"> <tr height=30><td colspan=21 bgcolor=#cccccc>'
           + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse; width: 253px;">'
           + '<tr><td width="3"><input type="text" id="DisColor"    style="border:solid 1px #000000;background-color:#ffff00" /></td>'
           + '<td width="3"><input type="text" id="HexColor"  size="7"  style="border:inset 1px;font-family:Arial;" value="#000000" /></td></tr></table>'
           + '</td></tr></table>'
           + '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse ; width: 253px;" bordercolor="#000000" onmouseover="doOver()" style="cursor:hand;" id="selectColor">'
           + colorTable + '</table>';
           
           //显示调色板
            document.getElementById("colorpanel").innerHTML = colorTable
        }        /** 
        * firefox 的颜色是以(RGB())出现，进行转换
        */
        function rgbToHex(aa) {
            if (aa.indexOf("rgb") != -1) {
                aa = aa.replace("rgb(", "")
                aa = aa.replace(")", "")
                aa = aa.split(",")
                r = parseInt(aa[0]);
                g = parseInt(aa[1]);
                b = parseInt(aa[2]);
                r = r.toString(16);
                if (r.length == 1) { r = '0' + r; }
                g = g.toString(16);
                if (g.length == 1) { g = '0' + g; }
                b = b.toString(16);
                if (b.length == 1) { b = '0' + b; }
                return ("#" + r + g + b).toUpperCase();
            }
            else {
                return aa;
            }
        }        /*
        * 鼠标动作
        */
        function doOver() {            var dis1 = document.getElementById("DisColor");
            var dis2 = document.getElementById("HexColor");
            var colorTable = document.getElementById("selectColor");            var tdList = colorTable.getElementsByTagName("td");
            for (var i = 0; i < tdList.length; i++) {
                var temp = "";
                tdList[i].onmouseover = function()   //上面
                {
                    temp = rgbToHex(this.style.backgroundColor);
                    dis1.style.backgroundColor = temp;
                    dis2.value = temp.toUpperCase();
                    this.style.backgroundColor = "#FFFFFF";
                    this.onmouseout = function()   //离开
                    {
                        this.style.backgroundColor = temp;
                    }
                    this.onclick = function() {                    var test = document.getElementById("Text2");                    test.style.color = temp;                    DisplayClrDlg(false);
                    
                    } 
                }
            }
        } function OnDocumentClick() {          document.getElementById("colorpanel").style.display = "block";
          intocolor();
          var srcElement = event.srcElement ? event.srcElement : event.target;
          if (srcElement.alt == "clrDlg") {
              //显示颜色对话框
              DisplayClrDlg(true);
          }
          else {
              //是否是在颜色对话框上点击的
              while (srcElement && srcElement.id != "colorpanel") {
                  srcElement = srcElement.parentElement;
              }
              if (!srcElement) {
                  //不是在颜色对话框上点击的
                  DisplayClrDlg(false);
              }
          }      }      //显示颜色对话框
      //display 决定显示还是隐藏
      //自动确定显示位置
      function DisplayClrDlg(display) {
          var clrPanel = document.getElementById("colorpanel");
          if (display) {
              var left = document.body.scrollLeft + event.clientX;
              var top = document.body.scrollTop + event.clientY;
              clrPanel.style.pixelLeft = left;
              clrPanel.style.pixelTop = top;
              clrPanel.style.display = "block";
          }
          else {
              clrPanel.style.display = "none";
          }
      }      
    </script>