テーブル（<table>、表）内の値の無い行を削除する JavaScript

CMSでホームページを管理する際は「掲載する可能性のある項目」をひな型として準備しておきますので、運用局面でホームページを更新する時に入力されない項目が出てきます。それらの項目の表示が表形式になっていた場合、値が空欄になっても表の行はそのまま残ってしまいます。

「その値が無い」という事を空欄で明確に示す事も重要な情報になる場合がありますが、補足的な情報の場合は、行そのものを削除してしまいたい場合があります。

このサポート情報ページでは、値が空欄のテーブル行を削除する JavaScript をご紹介します。<table> タグで表を書いている場合の他、<dl> リストの見た目を CSS で調整して表のように見せている場合の JavaScript サンプルコードもご紹介します。jQuery を使います。

<table> のHTMLコードサンプル

値が空欄の可能性のある表（テーブル）とは、例えば下記のようにテンプレートが設定してある表です。「値名#」の所は、「参考資料」や「備考」など、必ずしも入力されないかも知れない項目を想定しています。

コピー

<table>
<tr>
    <th>値名1</th>
    <td>
        <ul class="sugu-file-list">
            <!-- attached files : generate from article_file.txt -->
            %_file_list_%
        </ul>
    </td>
</tr>
<tr>
    <th>値名2</th>
    <td>%_article_image_3_%</td>
</tr>
<tr>
    <th>値名3</th>
    <td>%_linetext4_%</td>
</tr>
</table>

出力例

このようなテンプレート設定が、CMS運用時に入力値が無い事によって以下の様に書き出された時に、表の行を削除します。

コピー

<table>
<tr>
    <th>値名1</th>
    <td>
        <ul class="sugu-file-list">
            <!-- attached files : generate from article_file.txt -->
        </ul>
    </td>
</tr>
<tr>
    <th>値名2</th>
    <td></td>
</tr>
<tr>
    <th>値名3</th>
    <td></td>
</tr>
</table>

空のテーブル行の自動削除の設定方法

編集対象ファイル

対象となる表をどのページに掲載しているかによって、編集するテンプレートファイルが異なります。対象ページによって、それぞれ下記のテンプレートファイルを編集して下さい。

表示ページ	編集対象ファイル（templates/article/ 配下）
表示ページ	A. CSSクラス追加	B. JavaScript 追加
詳細ページ（webdir/1.html、2.html、...）	article.html	article.html
全一覧（webdir/index.html）	article_list.txt	article_list.html
短い一覧（webdir/index_short.html）	short_list.txt	short_list.html

A. HTMLタグと class 属性を設定

値があるかどうかをチェックしたい項目に、JavaScript で参照できるように class 属性を設定しておきます。テーブルの記載のあるテンプレートファイル（上記の表のA欄）に、以下の設定をして下さい。

ファイル項目は、親要素に class="check-delete-element" を追加（既にクラス属性が付いている場合は、スペースに続けて「check-delete-element」のみ追加）（青字例）。親要素が <td> になる場合は、 <span> で囲って class 属性を追加（赤字例）。
テキスト項目は <span> で囲って class="check-delete-text" を追加（緑字例）。

先ほどのHTMLコードにタグ付すると、以下のようになります。

コピー

<table>
<tr>
    <th>値名1</th>
    <td>
        <ul class="sugu-file-list check-delete-element">
            <!-- attached files : generate from article_file.txt -->
            %_file_list_%
        </ul>
    </td>
</tr>
<tr>
    <th>値名2</th>
    <td><span class="check-delete-element">%_article_image_3_%</span></td>
</tr>
<tr>
    <th>値名3</th>
    <td><span class="check-delete-text">%_linetext4_%</span></td>
</tr>
</table>

B. JavaScript の設定

それぞれ該当するテンプレートファイル内（上記の表のB欄）の </body> の直前に、以下の JavaScript を追加して下さい。緑字部分は、ページで既に jQuery を読み込んでいれば不要です。

コピー

<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    /* 記入が無い欄を削除 */
    $('.check-delete-element:not(:has(*)), .check-delete-text:empty').each(function(){
        $(this).closest('tr').remove();
    });
});
</script>

アップロードと動作確認

編集したテンプレートファイルをサーバにアップロードして、管理画面から色々な入力パターンを試して表示を確認して下さい。

<dl> リストを使う場合

<dl> リストと CSS を使って表組風に見せている場合は、テンプレート編集の際に以下のように設定して下さい。

<dl> リストで表組している場合のHTMLコードサンプル

class 属性の設定方法は <table> の場合と同じです。

コピー

<dl>
    <dt>値名1</dt>
        <dd>
            <ul class="sugu-file-list check-delete-element">
                <!-- attached files : generate from article_file.txt -->
                %_file_list_%
            </ul>
        </dd>
    <dt>値名2</dt>
        <dd>
            <span class="check-delete-element">%_article_image_3_%</span>
        </dd>
    <dt>値名3</dt>
        <dd>
            <span class="check-delete-text">%_linetext4_%</span>
        </dd>
</dl>

<dl> リストで表組している場合の、空行削除用 JavaScript

JavaScript コードの青字部分が異なります。

コピー

<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    /* 記入が無い欄を削除 */
    $('.check-delete-element:not(:has(*)), .check-delete-text:empty').each(function(){
        $(this).parent('dd').prev('dt').remove();
        $(this).parent('dd').remove();
    });
});
</script>