1

我在重复控件中有一个面板，我试图在单击按钮时从中提取内部 HTML？我已经尝试了下面的代码，但它不起作用，因为当我在浏览器中启动页面时，html 呈现的 ID 不同。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:repeat id="repeat1" rows="30" value="#{javascript:getNames();}" var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
        <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData.Name}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
            </xp:panel>
        </xp:repeat>

    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var el = XSP.getElementById('#{id:pnlReport}'); alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>
4

1 回答 1

4

<xp:panel id="pnlReport">在重复块内。

Id 将在您的示例中呈现为

  • “视图：_id1：repeat1：0：pnlReport”
  • “查看：_id1：repeat1：1：pnlReport”
  • ...

'#{id:pnlReport}'必须在同一个重复块中使用才能获得正确的 id。

否则，您只会得到没有任何索引的“view:_id1:repeat1:pnlReport”——而且这样的 id 不存在。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:repeat id="repeat1" rows="30" value="#{javascript:['aaa', 'bbb'];}"
        var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:panel>
        <xp:button value="GET INNER HTML" id="button1">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[
                    var el = XSP.getElementById('#{id:pnlReport}');
                    alert(el.innerHTML);]]>
                </xp:this.script>
            </xp:eventHandler>
        </xp:button>
    </xp:repeat>
</xp:view>

作为替代方案，您可以将面板和按钮放在重复控件之外。这样您将获得表格的整个呈现的 HTML：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:panel id="pnlReport">
        <xp:table style="width:100.0%">
            <xp:repeat rows="30" value="#{javascript:['aaa', 'bbb'];}"
                var="rowData" style="width:100%" removeRepeat="true">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:repeat>
        </xp:table>
    </xp:panel>
    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[
                var el = XSP.getElementById('#{id:pnlReport}');
                alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>
于 2020-08-26T13:55:10.703 回答