1

In my JSF app's page template, I use ui:repeat to iterate over some data to build an HTML table. I want to use basic HTML tags for this rather than something like h:dataTable, because when I tried to apply some styles and JavaScript events to that, they didn't appear on the correct elements. However, when using ui:repeat for this purpose, I find that it adds invalid tr and td opening an closing tags at inappropriate places.

The page template, has code similar to this:

<table border="1" style="width: 100%;">
    <ui:repeat var="row" value="#{bean.testData}">
        <tr>
            <ui:repeat var="column" value="#{bean.testData}">
                <td>#{row}, #{column}</td>
            </ui:repeat>
        </tr>
    </ui:repeat>
</table>

I actually want to do something more complex than this, but this is the simplest example of the problem.

The bean contains:

private final String[] testData = {"fu", "bar"};

public String[] getTestData() {
    return this.testData;
}

The output of this is:

<table border="1" style="width: 100%;"></td>
</tr>
<tr>
<td>
    <tr>
        <td>fu, fu</td>
        <td>fu, bar</td>
    </tr>
    <tr>
        <td>bar, fu</td>
        <td>bar, bar</td>
    </tr></td>
</tr>
<tr>
<td>
</table>

What I expected the output to be is:

<table border="1" style="width: 100%;">
    <tr>
        <td>fu, fu</td>
        <td>fu, bar</td>
    </tr>
    <tr>
        <td>bar, fu</td>
        <td>bar, bar</td>
    </tr>
</table>

I can't figure out why JSF's adding this at the beginning and end of the ui:repeat loop's output:

</td>
</tr>
<tr>
<td>

In Google Chrome and Firefox, this causes an extra row containing a single, empty cell at the top and bottom of the table.

Any ideas of how to prevent this?

Update: I didn't think to mention that this table I'm generating will appear inside a h:panelGrid element. I don't know whether that will make a difference to this question or not.

4

1 回答 1

1

根据更新，您需要将代码封装在 JSF 标记中，如下所示：

<h:panelGrid>
    <ui:fragment>
        <table border="1" style="width: 100%;">
            <ui:repeat var="row" value="#{bean.testData}">
                <tr>
                    <ui:repeat var="column" value="#{bean.testData}">
                        <td>#{row}, #{column}</td>
                    </ui:repeat>
                </tr>
            </ui:repeat>
        </table>
    </ui:fragment>
</h:panelGrid>

否则渲染h:panelGrid将无法在单元格中正确拆分嵌套内容。h:panelGrid旨在仅处理 JSF 组件。

更多信息 ：

于 2013-06-03T19:42:17.447 回答