テーブルジェネレーター

by ethertank

HTML

<h1>TABLE自動生成</h1>

<form>

  <fieldset>
    <legend>Size</legend>
    <label for="v">行</label>
    <input id="v" type="number" value="4" min="0" max="100" />

    <label for="h">列</label>
    <input id="h" type="number" value="4" min="0" max="100" />

    <label for="Layout">th</label>
    <select id="Layout">
      <option value="1">上</option>
      <option value="2">左</option>
      <option value="3">両方</option>
      <option value="4">無</option>
    </select>
  </fieldset>

  <fieldset>
    <legend>Info</legend>
    <label for="tableCaption">Caption</label>
      <input id="tableCaption" type="text" value="" placeholder="世界史年表" />
    <label for="tableSummary">Summary</label>
    <input id="tableSummary" type="text" value="" placeholder="年代・地域１・地域２・・" />
  </fieldset>  

  <div>
    <input id="b"  class="btn" type="button" value="Generate" />
    <input id="cb" class="btn" type="button" value="Clear" />
  </div>


  <div class="output_wrapper">
    <h2>Code</h2>
    <textarea id="output1" readonly="readonly"></textarea>
  </div>

  <div class="output_wrapper">
    <h2>Preview</h2>
    <div id="output2"></div>
  </div>
</form>

CSS

body { background: transparent; }

/* Generator */
html {
  background-color: #D72020;
  color: #fff;
  font-size: 62.5%;
  background-repeat: repeat-x;
  -webkit-background-size: 100% 180px;
     -moz-background-size: 100% 180px;
          background-size: 100% 180px;
  background-image: -webkit-gradient(
    linear, left top, left bottom,
    from(rgba(0,0,0,0.25)),to(transparent));
  background-image: -moz-linear-gradient(top,rgba(0,0,0,0.375),transparent);
  background-image:      linear-gradient(top,rgba(0,0,0,0.375),transparent);
}

body {
  min-width: 425px; max-width: 920px; margin: 0 auto; padding:20px;
  font-size: 160%;
  font-family:
    "Hiragino Kaku Gothic Pro", "Trebuchet MS",
    Verdana, Meiryo, "MSP Gothic", sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { margin:0 0 5px; padding:0; font-weight: 300; line-height: 1; }
h1 {
  font-size: 2em;
  font-family:
    KozGoPro-regular, "Hiragino Kaku Gothic Pro",
    "Trebuchet MS", Verdana, Meiryo,"MSP Gothic",
    sans-serif;
}

h2 { font-size: 1em; font-weight: 300; }

fieldset {
  border-style: dotted;
  border-color: #fc0;
  border-width: 1px 0 0 1px;
  padding: 1px 10px;
}
label:after { content: ":"; }

input[type="text"],
input[type="number"],
select,
input[type="button"],
#output1,
#output2 {
  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

input[type="text"],
input[type="number"],
select,
#output1,
#output2 {
  border: 1px solid #fff; padding: 2px; margin: 0;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.6) inset;
     -moz-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.6) inset;
          box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.6) inset;
}

input[type="text"],
input[type="number"],
select {
  font-size: 1.2em;
  font-family:
    KozGoPro-regular, "Hiragino Kaku Gothic Pro",
    Arial, Helvetica, "Trebuchet MS", Verdana,
    "MSP Gothic", sans-serif;
}

input[type="number"]{ width: 3em; }
input[type="text"]{ width: 120px; }

select,
input[type="button"] { cursor: pointer;...

JavaScript

// # TODO #
//  マークアップ改善, インデント切り替え, 連番入力機能追加

(function() {
  function addEvent(e,n,o,u){(e.addEventListener)? e.addEventListener(n,o,u) :/*
    */(e.attachEvent)? e.attachEvent('on'+n,o) : "";}
  function id(id) { var ID = document.getElementById(id); return ID; }

  var L = id('Layout'), btn = id('b'), cbtn = id('cb'),
      OUTPUT1 = id('output1'), OUTPUT2 = id('output2');
  var idt1 = "  ",
      idt2 = "    ",
      N = "\n";
  var TS =  '<table>' + N,
      TR =  idt1 + '<tr>' + N,
      TH =  idt2 + '<th>',
      TD =  idt2 + '<td>',
      TDE = '</td>' + N,
      THE = '</th>' + N,
      TRE = idt1 + '</tr>' + N,
      TE =  '</table>' + N;

  var ErrorFlg;

  function clear(){ OUTPUT1.value = ""; OUTPUT2.innerHTML = ""; }

  function gene() {
    var h = id('h').value,
        v = id('v').value,
        l = L.value;
    var FTRI = "",
        NTRI = "",
        FTRC = "",
        NTRC = "",
        X = "";

    var CAP = id('tableCaption').value,
        SUM = id('tableSummary').value;

    // 不正な入力値を判定
    ((h>100)||(v>100)||(h<=0)||(v<=0)||h.match(/[\D]/g)||v.match(/[\D]/g))? ErrorFlg = true : ErrorFlg = false;

    if (ErrorFlg===false){ 
      (CAP === "")? CAP = "": CAP = '  <caption>' + CAP + '</caption>' + N;  
      (SUM === "")? SUM = "": TS = '<table sammary="' + SUM + '">' + N;  
    
      // l(レイアウト) = 1:上 2:左 3:両方 4:無
      // ここらはswitch-case文に?
      // tr1行目
      if ((l==1) || (l==3)) { for(i = 0; i < h; i++) FTRI += TH + "" + THE; }
      if (l==2) { FTRI = TH + "" + THE; for (i = 1; i < h; i++) FTRI += TD + "" + TDE; }
      if (l==4) { for (i = 0; i < h; i++) FTRI += TD + "" + TDE; }

      FTRC = TR + FTRI + TRE;
      FTRI = ""; //開

      // tr2行目以降
      if (l == 1) { for (i = 0; i < h; i++) NTRI += TD + "" + TDE; }
      if ((l == 2) || (l == 3)) {
        NTRI = TH + "" + THE; for (i = 1; i < h; i++) NTRI += TD + "" + TDE;
      }
      if (l == 4) { for (i = 1; i < h; i++) NTRI += TD + "" + TDE; }

      NTRC = TR + NTRI +...