ver.1サポートサイト

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

最終更新日:2020年11月20日

例えば、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>