컬러 픽커 테이블 JS (소스)

<script>
var color_arr = new Array('00','11','22','33','44','55','66','77','88','99','AA','BB','CC','DD','EE','FF');
function c_table_rgb(){
    document.write("<table class='c_table' cellspacing='0' cellpadding='0'>");
    for(i=0,m=color_arr.length;i<m;i++){
    var rgb = '#'+color_arr[i].toString()+color_arr[i].toString()+color_arr[i].toString();
    document.write("<tr><td style='background-color:"+rgb+";' onclick='c_sel(this)' onmouseover='c_up(this)'></td></tr>");
    }
    document.write("</table>");        
}
function c_table_(ru,gu,bu){
    document.write("<table class='c_table' cellspacing='0' cellpadding='0'>");
    for(j=0,m=color_arr.length;j<m;j++){
    document.write('<tr>');
    if(ru)    var r = color_arr[j].toString();
    if(gu)    var g = color_arr[j].toString();
    if(bu)    var b = color_arr[j].toString();        
        for(i=0,m=color_arr.length;i<m;i++){
        if(!ru)        var r = color_arr[i].toString();
        if(!gu)        var g = color_arr[i].toString();
        if(!bu)        var b = color_arr[i].toString();                
        
        var rgb = '#'+r+g+b;
    document.write("<td style='background-color:"+rgb+";' onclick='c_sel(this)' onmouseover='c_up(this)'></td>");
        }
    document.write('</tr>');
    }
    document.write("</table>");        
}
function c_up(this_s){
    result = this_s.style.backgroundColor;
    color_picker.txt_color.style.backgroundColor = result;
    color_picker.txt_color.value =result;
}
function c_sel(this_s){
    result = this_s.style.backgroundColor;
    color_picker.btn_color.style.backgroundColor = result;
    color_picker.btn_color.value =result;
}
</script>
<style type="text/css">
.c_table{border-style:none;}
.c_table td{border-style:solid; border-width:0px; overflow:hidden; width:5px; height:5px; font-size:0px; cursor:crosshair; }
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><script> c_table_rgb(); </script></td>
<td ><script> c_table_(1,0,0); </script></td>
<td ><script> c_table_(0,1,0); </script></td>
<td ><script> c_table_(0,0,1); </script></td>
</tr>
<tr>
<td colspan="4"><form name="color_picker" style="padding:0; margin:0; "><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="50%"><label style="border-style:none; font-size:12px; ">색 : </label>
<input name="txt_color" type="text" id="txt_color" style="border-style:solid; border-width:1px; font-size:12px; " readonly="true" size="7" maxlength="0"></td><td align="right"><label style="border-style:none; font-size:12px; ">선택 : </label>
<input name="btn_color" type="button" id="btn_color2" style="border-style:outset; font-size:12px; background-color:#FFFFFF; " value="#FFFFFF">
</td>
</tr><td></td></table><label style="border-style:none; font-size:12px; "></label>
<label style="border-style:none; font-size:12px; "></label>
</form>
    </td>
</tr>
</table>
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1