一覧表で、特定の値の行のみ表示を変更
最終更新日: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>