SPIRALの単票ページで、データが未入力の項目（行）を自動的に非表示にするJavaScriptの実装方法を紹介します。
これにより、データが入力されている項目のみをスッキリと表示させることができ、
ユーザーにとって見やすい画面を作成できます。
実装の概要
今回のコードでは、以下の流れで処理を行います。
ページが読み込まれた際にJavaScriptを実行し、表（テーブル）内の各項目をチェック。値が空のセルの行全体を非表示にします。
1. ページ読み込み完了後、指定されたクラス名を持つテーブルを取得します。
2. テーブル内のすべての行
3. 各行の値のセル
4. セルが空だった場合、その行全体を非表示にします。
2. テーブル内のすべての行
<tr>を一つずつ調べます。
3. 各行の値のセル
<td>が空かどうかを判定します。
4. セルが空だった場合、その行全体を非表示にします。
対象のHTMLコード
以下のような、SPIRALの単票においてデフォルトで生成されるテーブル構造を対象とします。
<table class="smp-card-list">
<tr>
<th>
メールアドレス
</th>
<td>
%val:usr:f00xxxxxx%
</td>
</tr>
<tr>
<th>
名前
</th>
<td>
%val:usr:f00xxxxxx%
</td>
</tr>
<tr>
<th>
備考
</th>
<td>
%val:usr:f00xxxxxx%
</td>
</table>
JavaScriptコード
以下のJavaScriptコードを単票ページに設定します。このコードは、値が空のテーブル行を非表示にします。
<script>
document.addEventListener('DOMContentLoaded', function() {
// 対象のテーブルを取得
const table = document.querySelector('.smp-card-list');
if (!table) {
return; // テーブルが見つからない場合は何もしない
}
// テーブル内のすべての行を取得
const rows = table.querySelectorAll('tr');
rows.forEach(row => {
// 各行の2番目のセル（値が表示される<td>）を取得
const valueCell = row.querySelector('td');
if (valueCell) {
// セルのテキスト内容を取得し、前後の空白を削除
const cellText = valueCell.textContent.trim();
// セルが空文字、またはSPIRALの未入力時の置換文字列そのものである場合に非表示にする
if (cellText === '' || cellText.startsWith('%val:')) {
// 親の<tr>要素を非表示にする
row.style.display = 'none';
}
}
});
});
</script>
設定方法
SPIRALの単票ページのHTML内に、上記のJavaScriptコードを追加します。これを、
</body>タグの直前に追加するのが一般的です。
実行結果
単票ページが表示された際に、JavaScriptが自動で実行されます。例えば、「備考」フィールドが未入力の場合、「備考」の行全体（
<th>と
<td>）が表示されなくなります。
まとめ
本記事では、JavaScriptを用いて単票ページの未入力項目を非表示にする方法を紹介しました。
この実装により、表示する情報を動的に制御し、より見やすい画面を提供できます。
この実装により、表示する情報を動的に制御し、より見やすい画面を提供できます。
