VBScript 【グリッド操作編】



目次


表の作成

表を作成する処理について解説します。

プログラムソース

<html>

 <head>
  <HTA:APPLICATION />
 </head>

 <body onLoad="VBScript:Window.ResizeTo 400,250">
  <form name="Form1">
   <table id="Table1" border="1">
      <tr>
         <th>社員コード</th>
         <th>社員名</th>
      </tr>
      <tr>
         <td>1</td>
         <td>社員A</td>
      </tr>
      <tr>
         <td>2</td>
         <td>社員B</td>
      </tr>
   </table>
  </form>
 </body>

</html>

解説

<table></table>

テーブルを定義します。

<tr></tr>

行を指定します。

<th></th>

見出しを指定します。

<td></td>

値(データ)を指定します。


セル値の取得

セル値を取得する処理について解説します。

プログラムソース

<html>

 <head>
  <HTA:APPLICATION />
  <script language="VBScript">

   Sub Cell_Click(obj)
      For Each objth In document.getElementsByTagName("td")
         objth.style.backgroundColor = "#FFFFFF"
      Next
      obj.style.backgroundColor = "dodgerblue"
      document.Form1.Hidden_Row.Value=obj.parentNode.rowIndex
      document.Form1.Hidden_Col.Value=obj.cellIndex
   End Sub

   Sub Button1_Click()
      row = CInt("0" & document.Form1.Hidden_Row.Value)
      col = CInt("0" & document.Form1.Hidden_Col.Value)
      Set objTBL =document.getElementByID("Table1")
      MsgBox(objTBL.rows(row).cells(col).innerHTML)
   End Sub

  </script>
 </head>

 <body onLoad="VBScript:Window.ResizeTo 400,250">
  <form name="Form1">
   <table id="Table1" border="1">
      <tr>
         <th>社員コード</th>
         <th>社員名</th>
      </tr>
      <tr>
         <td onClick="Cell_Click(Me)">1</td>
         <td onClick="Cell_Click(Me)">社員A</td>
      </tr>
      <tr>
         <td onClick="Cell_Click(Me)">2</td>
         <td onClick="Cell_Click(Me)">社員B</td>
      </tr>
   </table>
   <input type="hidden" id="Hidden_Row">
   <input type="hidden" id="Hidden_Col">
   <button name="Button1" onClick="Button1_Click()">
      値取得
   </button>
  </form>
 </body>

</html>

解説

Elementオブジェクト.style.backgroudColor = 色

セルの背景色を設定します。

行位置：TableRowオブジェクト.rowIndex
列位置：Tdオブジェクト.cellIndex

選択セル位置を隠しフィールドにセットします。


行の追加

行を追加する処理について解説します。

プログラムソース

<html>

 <head>
  <HTA:APPLICATION />
  <script language="VBScript">

   Sub Button1_Click()

      Set objTBL =document.getElementByID("Table1")
      Set objRow = objTBL.insertRow(-1)

      Set Cell1 = objRow.insertCell(0)
      Set Cell2 = objRow.insertCell(1)

      Cell1.innerHTML = objTBL.rows.length - 1
      Cell2.innerHTML = "社員" & Chr(63 + objTBL.rows.length)

   End Sub

  </script>
 </head>

 <body onLoad="VBScript:Window.ResizeTo 400,250">
  <form name="Form1">
   <table id="Table1" border="1">
      <tr>
         <th>社員コード</th>
         <th>社員名</th>
      </tr>
   </table>
   <button name="Button1" onClick="Button1_Click()">
      行追加
   </button>
  </form>
 </body>

</html>

解説

Tableオブジェクト.insertRow(行番号)

テーブルに行を追加します。

TableRowオブジェクト.insertCell(列番号)

テーブル行にセルを追加します。


テーブルデータの表示

テーブルデータを表示する処理について解説します。

プログラムソース

<html>
 <head>
  <HTA:APPLICATION />
  <script language="VBScript">
   Sub Button1_Click()
      Dim Cn, Rs, strSQL
      Set Cn = CreateObject("ADODB.Connection")
      Cn.ConnectionString = "Provider=SQLOLEDB;" & _
         "Data Source=localhost\SQLExpress;" & _
         "Initial Catalog=Database;User ID=sa;Password=sa;"
      Cn.Open
      strSQL = "SELECT * FROM 社員マスタ"
      Set Rs = CreateObject("ADODB.Recordset")
      Rs.Open strSQL, Cn
      Set objTbody = document.createElement("tbody")
      Do Until Rs.EOF
         Set objTr = document.createElement("tr")
         For i = 0 To 1
            Set objTd = document.createElement("td")
            objTd.innerHTML = Rs.Fields(i)
            objTr.appendChild(objTd)
         Next
         objTbody.appendChild(objTr)
         Rs.MoveNext
      Loop

      Set objTBL = document.getElementById("Table1")
      objTBL.appendChild(objTbody)

      Rs.Close : Set Rs = Nothing
      Cn.Close : Set Cn = Nothing

   End Sub 
  </script>
 </head>

   <body onLoad="VBScript:Window.ResizeTo 400,250">
   <form name="Form1">
      <table id="Table1" border="1">
         <tr>
            <th>社員コード</th>
            <th>社員名</th>
         </tr>
      </table>
      <button name="Button1" onClick="Button1_Click()">
         表示
      </button>
  </form>
 </body>

</html>