Howto show/hide a table row dynamically from SSJS?

Question

I try to create contents of an html table dynamically. Based on some userinput I want to show/hide additional rows.

Very simple example:

    <xp:table border="1" width="100%">
    <xp:repeat id="repeat1" rows="30" repeatControls="true" removeRepeat="true">
        <xp:this.value><![CDATA[#{javascript:return [1,2]}]]></xp:this.value>

            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
            </tr>

            <xp:tr>
                <xp:this.rendered><![CDATA[#{javascript:viewScope.get("show")}]]></xp:this.rendered>
                <xp:td colspan="2">             
                Action Row
            </xp:td>

        </xp:tr>
    </xp:repeat>
    </xp:table> 

I expect that this row shows up if viewScope is set to true. But what I get is

<div id="view:_id1:repeat1">
Item 1Item 2Action Row

Item 1Item 2Action Row

</div>
<table border="1" width="100%">
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
    </tbody>
</table>

The rendered row is placed outside the table tree along with the duplicated text content of the repeated table cells.

How can I show/hide a table row by SSJS?

Answer 1

If the server version is 8.5.3 or higher, you can use the xp:panel-tag with tagName attribute (if xp:tr doesn't work):

<xp:panel tagName="tr" rendered="#{viewScope.show == true}">
<td>Action row</td>
</xp:panel>

Answer 2

Your example code works perfect for me. It renders the dynamic action row within the table.

This is your example extended by a check box "Show action row". It partially refreshes the table. As you can see the action rows appear and disappear depending on check box value:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:checkBox
        text="Show action row"
        id="checkBox1"
        value="#{viewScope.show}"
        checkedValue="true"
        uncheckedValue="false">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial" refreshId="table1">
        </xp:eventHandler>
    </xp:checkBox>
    <br />
    <xp:table id="table1" border="1" width="100%">
        <xp:repeat id="repeat1" rows="30" repeatControls="true" removeRepeat="true">
            <xp:this.value><![CDATA[#{javascript:return [1,2]}]]></xp:this.value>
            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
            </tr>
            <xp:tr>
                <xp:this.rendered><![CDATA[#{javascript:viewScope.show =='true'}]]></xp:this.rendered>
                <xp:td
                    colspan="2"> Action Row</xp:td>
            </xp:tr>
        </xp:repeat>
    </xp:table>
</xp:view>

Go from there to accomplish your real code.