« 非対応ブラウザでaudioタグを動かす:html5media | トップページ | ◇雪は降る:命題とは何か »

□TABLEの色組み合わせを試すツール

 TABLEの色組み合わせをマウス操作で試すツール:css3出力あり

テーブルの奇数行、偶数行をマウス操作で色々と変えてみることのできるツールを 作成しました。操作はcss3のstyleの表記にも反映します。

要素の色表示テーブルまたは [色適用要素]を選択し、色チップをクリックすると左のテーブルの 色がかわります。
[枠/ヘッダ/ヘッダの文字/奇数行/同文字/偶数行/同文字]が設定 できます。
適用背景はサンプルテーブルのセルをクリックすることでも選択できます。
文字の色は[色選択要素]で「文字」を選択し、色チップで変更できるほか、ヘッダ/奇数/偶数 の選択状態で[黒][白][青]を選択することもできます。
css3のstyle記述例にも反映されます。色を名前とするか16進値とするかを選択できます。

大型 小型
ワシ スズメ
ペンギン ツバメ
ツル チドリ
ハト メジロ

ヘッダ ヘッダ文字
black
#000000
darkblue
#00008b
white
#ffffff
奇数行 奇数行文字色 偶数行 偶数行文字色
honeydew
#f0fff0
black
#000000
lightcyan
#e0ffff
black
#000000

色適用要素:
black
#000000
dimgray
#696969
gray
#808080
darkgray
#a9a9a9
silver
#c0c0c0
lightgrey
#d3d3d3
gainsboro
#dcdcdc
whitesmoke
#f5f5f5
white
#ffffff
snow
#fffafa
ghostwhite
#f8f8ff
floralwhite
#fffaf0
linen
#faf0e6
antiquewhite
#faebd7
papayawhip
#ffefd5
blanchedalmond
#ffebcd
bisque
#ffe4c4
moccasin
#ffe4b5
navajowhite
#ffdead
peachpuff
#ffdab9
mistyrose
#ffe4e1
lavenderblush
#fff0f5
seashell
#fff5ee
oldlace
#fdf5e6
ivory
#fffff0
honeydew
#f0fff0
mintcream
#f5fffa
azure
#f0ffff
aliceblue
#f0f8ff
lavender
#e6e6fa
lightsteelblue
#b0c4de
lightslategray
#778899
slategray
#708090
steelblue
#4682b4
royalblue
#4169e1
midnightblue
#191970
navy
#000080
darkblue
#00008b
mediumblue
#0000cd
blue
#0000ff
dodgerblue
#1e90ff
cornflowerblue
#6495ed
deepskyblue
#00bfff
lightskyblue
#87cefa
skyblue
#87ceeb
lightblue
#add8e6
powderblue
#b0e0e6
paleturquoise
#afeeee
lightcyan
#e0ffff
cyan
#00ffff
aqua
#00ffff
turquoise
#40e0d0
mediumturquoise
#48d1cc
darkturquoise
#00ced1
lightseagreen
#20b2aa
cadetblue
#5f9ea0
darkcyan
#008b8b
teal
#008080
darkslategray
#2f4f4f
darkgreen
#006400
green
#008000
forestgreen
#228b22
seagreen
#2e8b57
mediumseagreen
#3cb371
mediumaquamarine
#66cdaa
darkseagreen
#8fbc8f
aquamarine
#7fffd4
palegreen
#98fb98
lightgreen
#90ee90
springgreen
#00ff7f
mediumspringgreen
#00fa9a
lawngreen
#7cfc00
chartreuse
#7fff00
greenyellow
#adff2f
lime
#00ff00
limegreen
#32cd32
yellowgreen
#9acd32
darkolivegreen
#556b2f
olivedrab
#6b8e23
olive
#808000
darkkhaki
#bdb76b
palegoldenrod
#eee8aa
cornsilk
#fff8dc
beige
#f5f5dc
lightyellow
#ffffe0
lightgoldenrodyellow
#fafad2
lemonchiffon
#fffacd
wheat
#f5deb3
burlywood
#deb887
tan
#d2b48c
khaki
#f0e68c
yellow
#ffff00
gold
#ffd700
orange
#ffa500
sandybrown
#f4a460
darkorange
#ff8c00
goldenrod
#daa520
peru
#cd853f
darkgoldenrod
#b8860b
chocolate
#d2691e
sienna
#a0522d
saddlebrown
#8b4513
maroon
#800000
darkred
#8b0000
brown
#a52a2a
firebrick
#b22222
indianred
#cd5c5c
rosybrown
#bc8f8f
darksalmon
#e9967a
lightcoral
#f08080
salmon
#fa8072
lightsalmon
#ffa07a
coral
#ff7f50
tomato
#ff6347
orangered
#ff4500
red
#ff0000
crimson
#dc143c
mediumvioletred
#c71585
deeppink
#ff1493
hotpink
#ff69b4
palevioletred
#db7093
pink
#ffc0cb
lightpink
#ffb6c1
histle
#d8bfd8
magenta
#ff00ff
fuchsia
#ff00ff
violet
#ee82ee
plum
#dda0dd
orchid
#da70d6
mediumorchid
#ba55d3
darkorchid
#9932cc
darkviolet
#9400d3
darkmagenta
#8b008b
purple
#800080
indigo
#4b0082
darkslateblue
#483d8b
blueviolet
#8a2be2
mediumpurple
#9370db
slateblue
#6a5acd
mediumslateblue
#7b68ee

css3のstyle記述例  色指定:
<style type="text/css">
table.t {border:1px solid #000000; border-collapse:collapse;}
table.t td{border:1px solid #000000;}
table.t th{border:1px solid #000000;}
table.t th{background-color:#00008b;color:#ffffff;}
table.t tr:nth-child(odd)  td{background-color:#f0fff0;color:#000000;}
table.t tr:nth-child(even) td{background-color:#e0ffff;color:#000000;}
</style>

 ### メモ

イベントが発生した要素をactiveElementで得ることはfirefoxでは出来ませんでした。


firefoxでは複数行からなる文字列の取り扱いは全て細かく利用者が 行わなければなりません。firefox以外ではinnterTextで簡単にできる ものが、firefoxのtextContentでは改行が取り扱われないため、 textNodeの並びとBRElementの並びを自力で操作する必要があります。

次の臨時のコードでテキストの取得、設定を行っています。

<script type="text/javascript">
function setInnerText(elm,txt){
   if (typeof elm.innerText == "undefined") {
      while (elm.firstChild) {
         elm.removeChild(elm.firstChild);
         }
      var txts = txt.split("<br>");    // <br>で分割
      for(var i=0;i<txts.length;++i){
         if( i!=0 ) elm.appendChild(document.createElement("br"));
         elm.appendChild(document.createTextNode(txts[i]));
         }
      }
   else {
      elm.innerText   = txt; // firefox以外はこんなに簡単
      }
   }
function getInnerText(elm){
   if (typeof elm.innerText == "undefined") {
      var text="";
      var childs= elm.childNodes;
      if( childs!=null ){
         for(var i=0;i<childs.length;++i){
            if( childs[i].nodeType==3 ){ // 3 mean Text
               text += childs[i].textContent;
               }
            else if( childs[i].nodeType==1 ){ // BRElementのはず
               text +="<br>";
               }
            }
         }
      return text;
      }
   else {
      return elm.innerText; // firefox以外はこんなに簡単
      }
   }
</script>


firefoxではcolor,backgroundColorを取得した場合#xxxxxxでなくrgb(ddd ddd ddd)の 形式が得られます。
10進数->16進数変換を行い他のブラウザに揃えます。

<script type="text/javascript">
function toHexRGB(txt){
   if( txt.indexOf("rgb") !=0 ) return txt;      // startsWithの代わり
   txt = txt.replace("rgb(","").replace(")","");
   var txts = txt.split(",");
   var ret="#";
   for(var i=0;i<txts.length;++i){
      var val= parseInt(txts[i]);
      var h  = val.toString(16);
      if( h.length==1 ) ret+="0";
      ret += h;
      }
   return ret;
   }
</script>
なお、最終的にはこれは使わない形になりました。


いやあ、firefox対応は本当に大変だ。本質プログラムよりfirefox対応の方が長くなる。

|

« 非対応ブラウザでaudioタグを動かす:html5media | トップページ | ◇雪は降る:命題とは何か »

トラックバック


この記事へのトラックバック一覧です: □TABLEの色組み合わせを試すツール:

« 非対応ブラウザでaudioタグを動かす:html5media | トップページ | ◇雪は降る:命題とは何か »