ver.1サポートサイト


一覧表で、特定の値の行のみ表示を変更

最終更新日:2023年05月18日

例えば、div要素が行を表している一覧表にて、ブーリアン型フィールドの値が「1(=フラグが立っている)」の場合、div要素の背景色を黄色く、「1」以外の場合、白に設定するサンプルをご案内します。

変更前の設定

サンプルXML

一覧表のソースデザイン画面にて、サンプルXMLは以下の通りです。

<usr_xxxxxx selected="1">はい</usr_xxxxxx>

元のXSL

一覧表を作成直後のtableタグではなく、divタグを使い表示する場合、ソースデザイン画面にて、XSLは以下の通りに設定されています。

<div> 一覧表の出力項目 </div>

一覧表をdivタグを使い表示する方法は、サンプルプログラム(XSL) 一覧表で、tableタグを使わないで表示 をご覧ください。

HTMLソース

ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。

<div> 一覧表の出力項目 </div>

変更手順

1.表示を変更したい行を表すdiv要素を確認します。

2.div要素にstyle属性を追加します。

<div>
    <xsl:attribute name="style">
    </xsl:attribute>
    一覧表の出力項目
</div>

3.条件式を追加します。

<div>
    <xsl:attribute name="style">
        <xsl:choose>
            <xsl:when test="usr_xxxxxx/@selected=1">
                styleの値A
            </xsl:when>
            <xsl:otherwise>
                styleの値B
            </xsl:otherwise>
        </xsl:choose>
    </xsl:attribute>
    一覧表の出力項目
</div>

4.styleの値に背景色を指定します。

背景色を黄色くする:background-color: gold;

背景色を白くする:background-color: white;


変更後の設定

変更後のXSL

変更後のXSLは以下の通りです。

<div>
    <xsl:attribute name="style">
        <xsl:choose>
            <xsl:when test="usr_xxxxxx/@selected=1">
                background-color: gold;
            </xsl:when>
            <xsl:otherwise>
                background-color: white;
            </xsl:otherwise>
        </xsl:choose>
    </xsl:attribute>
    一覧表の出力項目
</div>

HTMLソース

ブラウザで一覧表のHTMLソースを表示した場合、変更後は以下の通りです。

<div style=”background-color: gold;”>
    一覧表の出力項目
</div>