テーブルはデータを一覧する一般的な表示方法です。
ただしホームページ上のテーブルはエクセルの様に自由に読み書きができるものではありません。

HTMLに戻ってソースを埋め込もうとしてもタグの連発となりますのでマクロ化が必要になります。
やはり Wix のテーブルはコレクションに繋げるのが最もスマートな使い方で、フォームを作ってその集計表に接続すれば入力と一体化もできます。

しかし、Veloでコーディングすれば、読み、書き、更新、削除はすべて簡単に行えます。
テーブルのデータはコレクションやリピーターのデータ形式と全く同じアイテムの配列だからです。
従ってこれらのコード操作は全て共通しています。
そして、それぞれの要素に操作したデータを渡せば、それが静的であれ動的であれページ要素が自分で見た目を整えてくれます。

つまりテーブルのコーディングとはオブジェクトの操作、配列の操作に尽きます。
第03回でオブジェクト、第09回で配列についてお示ししましたのでご参考になれば幸いです。
さて、ここではテーブルに並んでいる9つの数字をボタンクリックでランダムに入れ替える操作をコーディングします。

ページ要素

ページ要素は3×3のテーブル(myTable)が1つ、ボタン(myButton)が1つです。テーブルは「表を管理」メニューで3つのコラム Column1、Column2、Column3 を作りアイテムのコラム名にしています。

また「デザイン」メニューで通常の罫線枠にしましたがこれはお好みです。

データ

リピーターのデータはdataプロパティで設定しましたが、テーブルのデータは rows プロパティで設定します。
各行のデータとなるアイテムオブジェクトは { Column1: 数字, Column2: 数字, Column3: 数字 } の形です。
またデータ全体は[{ Column1: 数字, …}, { Column1: 数字, …}, { Column1: 数字, …}]とアイテムオブジェクト3個の配列です。
リピーターの場合と全く同じ構造です。

コード(配列のランダム化)

配列 [1, 2, 3, 4, 5, 6, 7, 8, 9] をランダムに並べ替えるコードが必要になります。
randomisedArray( ) がその関数で引数を 9にすれば結果を得ます。
この関数の中で2つの関数を呼んでいます。
一つ目は regularArray( ) で、引数を 9にすれば配列  [1, 2, 3, 4, 5, 6, 7, 8, 9] を生成します。
二つ目はくじ引き関数 drawLottery( ) で、これをを while文で呼んでいます。drawLottery( ) は元の配列(source)からくじ引きをして、当たりの数を source から省いて結果の配列(target)に追加する関数です。
ここでは Mathオブジェクトという関数専門のオブジェクトから random( ) 関数を使ってくじ引きをしています。
Math.floor(Math.random( ) * n) は 0 ～ n 未満までの数から当たりを引くときのイディオムです。

コード(配列のデータ化)

配列からテーブル用のデータに直すコードが必要になります。
以下の関数makeTableRows( ) では、引数の配列を3つに分けて各行のコラム名Column1、Column2、Column3 を付けてアイテムオブジェクトを作り、最後に配列に収めてリターンしています。

コード(イベントホルダー)

ページの初期化時に onReady( ) でテーブルをレギュラーな数字順で表示します。
ボタンクリック時に myButton_click( )でくじ引きが行われランダムな数字順に変わります。
データの設定は rows プロパティで行います。

プレビュー

VBEを使って

エクセルから直接テーブルデータを作るのは簡単です。マクロを動かしてrows データを作れば何の問題もありません。
HTMLタグもその埋め込みも、そもそも不要ですから心配無用です。Wixテーブルの外観がそのまま利用できるお手軽な方法です。

ACTONE: お試し用リンク

今回紹介した機能をWebサイト上で体験していただけます。

Velo開発のご依頼はこちら