[mayaa-user:597] Re: テーブルの1行おきに背景色を変える

[suga]

suga です。

On 11/30/07, 田村　中 <[E-MAIL ADDRESS DELETED]> wrote:
> DBからとってきたListをループして表示する際に、
> <tr>タグに1行置きにいろを付けたいんですが
> いろいろ試してもどうしてもうまくいきません。
> list.mayaaソース（抜粋）
> <!-- 行の背景色指定 -->
> <m:if m:id="tableRow" test="${ i % 2 != 0}">
>  <m:echo m:id="tableRow">
>   <m:attribute name="bgcolor" value="#F1F1F1"/>
>  </m:echo>
>  <m:doBody/>
> </m:if>
> <m:if m:id="tableRow" test="${ i % 2 == 0}">
>  <m:echo m:id="tableRow">
>   <m:attribute name="bgcolor" value="#F1F1F1"/>
>  </m:echo>
>  <m:doBody/>
> </m:if>

ここを下記のようにすれば OK です。

    <m:echo m:id="tableRow">
        <m:if test="${ i % 2 != 0}">
            <m:attribute name="bgcolor" value="#F1F1F1"/>
        </m:if>
        <m:if test="${ i % 2 == 0}">
            <m:attribute name="bgcolor" value="#FFFFFF"/>
        </m:if>
        <m:doBody/>
    </m:echo>

HTML 側の id に対応する m:id は、必ずひとつです。
複数あっても使われません。(し、ログに警告が出ます)

まず tableRow に対応する tr タグは必ず出力する、かつその属性を書き換えるので
m:echo を割り当てます。その中で、m:if を使って m:attribute を使い分ける形に
なります。


下記のようにするともっとシンプルになります。
JavaScript の３項演算子を使っています。

    <m:echo m:id="tableRow">
        <m:attribute name="bgcolor"
            value="${ (i % 2 != 0) ? '#F1F1F1' : '#FFFFFF' }"/>
        <m:doBody/>
    </m:echo>


もう少し発展させると、こんな感じです。
tr タグに直接 m:forEach を当てて、その中で m:echo を使っています。
こうすると tr を div で囲まなくて良くなります。
Mayaa 側がやや複雑になってしまうのが難点ですけど。

HTML

    <tr m:id="tableRow">
        <td>(省略)</td>
    </tr>

Mayaa

    <m:forEach m:id="tableRow"
            m:items="${ adminList }" m:var="admin" m:index="i">
        <m:echo>
            <m:attribute name="bgcolor"
                value="${ (i % 2 != 0) ? '#F1F1F1' : '#FFFFFF' }"/>
            <m:doBody/>
        </m:echo>
    </m:forEach>

-- 
suga ( [E-MAIL ADDRESS DELETED] )