アンケートフォームづくり　なんとか。 - インストールレスプログラミング( ´ー`)

いろいろと試行錯誤をして，たぶんですが

<table id="～"></table>

に対してinnerHTMLを使うのをHTAでは拒否られていたようでした。

HTMLではそんなこと気にせずやってくれてたので，残念ですが，HTA+JScriptとHTML+JavaScriptで仕様が違うのはわかってること。

ローカルファイルにアクセスしたい私はHTA+JScriptで推し進めるしかないこと。

いろいろな表現方法があるわけで，なんとか乗り越えられることが多々であることから，がんばるしかありません。

とりあえず，拡張子をhtaにしても怒られずに動くものになったのでコードをのせます。

この場合コードって表現でいいのか，ソースって言うべきなのか，そのへん知りませんが気にせずわたしはコードと言い張っておこう。VBA扱うときいいかえるのがめんどい。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
    table{border-collapse: collapse;}
    table,tr,td{border: solid 2px black;}
    td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px}
    td.clskaito{padding-left: 20px;background-color: antiquewhite}
  </style>
<script>
  function init(){
    var tmp=[]
    var arr=[];for(var i=1;i<41;i++){arr.push(i)}
    tmp.push("<table>")
    tmp.push(makeElement(1,"番号","food","select",arr))
    tmp.push(makeElement(2,"食べ物をひとつえらべ","food","radio",["りんご","みかん","バナナ"]))
    tmp.push(makeElement(3,"好きなペットをえらべ(複数可)","pet","check",["犬","猫","ハムスター"]))
    tmp.push(makeElement(4,"てすとですよ","textar","text"))
    tmp.push(makeElement(5,"てすとですとも","text","multi"))
    tmp.push("</table>")
    document.getElementById("table").innerHTML=tmp.join("")
  }
  
  function makeElement(No,mondai,name,type,arr){
    tablepart=document.getElementById("table")
    var html=[];
    var tmp;
    switch(type){
      case "select":tmp = makeSelectElement(name,"select",arr);break
      case "radio":tmp = makeSelectElement(name,"radio",arr);break
      case "check":tmp = makeSelectElement(name,"checkbox",arr);break
      case "text":tmp="<input type='text' name='" + name + "' size='45' />";break
      case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break
    }
    
    html.push("<tr><td class='clsmondai'>" + mondai + "</td></tr>")
    html.push("<tr><td class='clskaito' id='" + name + "'>")
    html.push(tmp+"</td>")
    
    return html.join("")
  }

  function makeSelectElement(name,type,arr){
    switch(type){
     case "select":
        var tmp=[]
        tmp.push("<select id='" + name +"'>")
        for(var i=0;i<arr.length;i++){tmp.push("<option value='" + arr[i]+"'>"+arr[i]+"</option>")}
        tmp.push("</select>")
        element=tmp.join("")
        break
      case "radio":
      case "checkbox": //間違いじゃないよ
        var tmp=[]
        for(var i=0;i<arr.length;i++){
          tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>")
        }
        element=tmp.join("")
        break

    }
    return element
  }
</script>
</head>
<body onload="init()">
  <form id="formFld">
    <div id="table"></div>
    <input type="button" href="#" value="送信する" onClick="PostData()"/>
  </form>
</body>
</html>

余裕がなかったのでペットにバナナがあったりしたのも編集(;´∀｀)
f:id:chemiphys:20190112131953p:plain

こんな画面になるかと思います。
tmp.push(mekeElement(～))
の繰り返しで要素を増やせるように作ったので，Excel側でVBAで制御しやすくなったはず。

あとはきちんと統合していこう。

苦労はしているけどたぶん順調。。

ちょっと小説に逃げよう。