none
【VBS】動的な表作成【HTA】 RRS feed

  • 質問

  • 動的な表作成を行いたいと思っています。

    拡張子はHTA
    プログラム言語はVBScript

    テキストボックスに文字を入力し、「検索」を押すとCSVからデータを読み込んで
    <span id=TableArea></span>
    上記TableAreaに表を作成します。




    [テキストボックス][検索ボタン]

    <span id=TableArea>
    番号,名前,削除
    1,1,[削除ボタン]
    2,2,[削除ボタン]
    3,5,[削除ボタン]
    4,6,[削除ボタン]
    5,11,[削除ボタン]
    </span>

    [テキストボックス2][行追加ボタン]


    上記のようなレイアウトになっています。
    CSVを読み込み、表にするところまでは上手く動作します。

    しかし、行追加、そして削除ボタンを押したときの動作を
    組み込むことが出来ません。


    ちなみに、最初の表を作るときはこのように作っています。
    TABLEAREADATA=TableArea.innerhtml
    TABLEAREADATA= TABLEAREADATA & "<table id=" & DQ  & "TABLEDATA" & DQ & " cellpadding=" & DQ & "0" & DQ & " border=1 style=" & DQ & "font-size:20px;" & DQ & ">"
    TABLEAREADATA= TABLEAREADATA &  "<tr><td align=" & DQ & "center" & DQ & ">No</td>"
    TABLEAREADATA= TABLEAREADATA & "<td align=" & DQ & "center" & DQ & ">名前</td>"
    TABLEAREADATA= TABLEAREADATA & "<td align=" & DQ & "center" & DQ & ">削除</td></tr>"

    'ループ
    No="<tr><td>" & NowRow+1 & "</td>"
    NameData="<td>-</td>"
    DELETEB="<td><input type="& DQ & "button" & DQ &  " onclick=" & DQ & "DeleteRow(" & NowRow+1 &")" &  DQ  & "></td></tr>"

    addData=TABLEAREADATA & NO & NameData & DELETEB
    TABLEAREADATA=addData
    'ループ終わり

    TableArea.innerHtml=TABLEAREADATA & "</table>"

    行追加ボタンはInsertRow
    行削除ボタンはDeleteRow として作っています。

    また、行追加する際に制約があります。
    「名前」部分には数1~50までしか入力できません。
    また、同じ数字を行追加することは出来ないようにしたいと思っています。

    何か良い方法は無いでしょうか?
    よろしくお願いいたします。
    2016年6月30日 4:30

回答

  • やりたいことは分かったのですが、何を聞きたいのかが良くわからなかったので、望んでいる回答ではないかもしれませんが;

    > 「名前」部分には数1~50までしか入力できません。

    であれば、<input type="text"> ではなく、<select><option>1</option></select> で選ばせるとか。

    > また、同じ数字を行追加することは出来ないようにしたいと思っています。

    <select>で選択させるようにすれば、使用済みの番号を取り除くことで、重複入力を制限できるかと思います。
    <input>で入力させる場合は、InsertRow の段階で値を検査し、重複なら alert か MsgBox 等で警告して再入力を促せばよいのではないかと。

    > 何か良い方法は無いでしょうか?

    どういった回答を求めているのかわからなかったのですが、CSVデータを HTA 上に「表」として見せるのであれば、Tabular Data Control (TDC)を用いるという手法があります。

    http://www.makoto3.net/document/databind/databind_all.html

    • 回答としてマーク さろるん 2016年7月4日 6:03
    2016年6月30日 18:23

すべての返信

  • やりたいことは分かったのですが、何を聞きたいのかが良くわからなかったので、望んでいる回答ではないかもしれませんが;

    > 「名前」部分には数1~50までしか入力できません。

    であれば、<input type="text"> ではなく、<select><option>1</option></select> で選ばせるとか。

    > また、同じ数字を行追加することは出来ないようにしたいと思っています。

    <select>で選択させるようにすれば、使用済みの番号を取り除くことで、重複入力を制限できるかと思います。
    <input>で入力させる場合は、InsertRow の段階で値を検査し、重複なら alert か MsgBox 等で警告して再入力を促せばよいのではないかと。

    > 何か良い方法は無いでしょうか?

    どういった回答を求めているのかわからなかったのですが、CSVデータを HTA 上に「表」として見せるのであれば、Tabular Data Control (TDC)を用いるという手法があります。

    http://www.makoto3.net/document/databind/databind_all.html

    • 回答としてマーク さろるん 2016年7月4日 6:03
    2016年6月30日 18:23
  • 回答頂きありがとうございます。

    結局、違う方法で追加することにしました。

    TableArea.innerHTML にどんどん追記していくシステムにしました。

    <Span id=XXXX> を追加して、それを元に行の削除を行います。

    追加した行は、hiddenになっているinputに[10][21][22] というように書き出し

    削除したらそれも連動して動かすようにしました。

    教えて頂いた内容はじっくり確認して、どうするか決めようと思います。

    お手数をおかけしました、ありがとうございました!

    2016年7月4日 6:06