显示块格式化问题

时间:2014-07-15 10:18:17

标签: css xpages

我试图在点击某些图像时显示/隐藏,但tr的格式化非常错误。难道我做错了什么??附上是结果。我也尝试添加自定义格式,但也不会工作。 enter image description here

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div style="position:relative;">
    <xp:table id="table1">
        <xp:tr style="width:100%">
            <xp:td>a</xp:td>
            <xp:td>b</xp:td>
            <xp:td>c</xp:td>
            <xp:td>d</xp:td>
            <xp:td>e</xp:td>
        </xp:tr>
        <xp:tr id="tr0" style="width:100%">
            <xp:td><xp:comboBox id="Vnr">
                </xp:comboBox></xp:td>
            <xp:td><xp:comboBox id="comboBox1"></xp:comboBox></xp:td>
            <xp:td id="td1"><xp:image url="./add.png" id="image23">
            <xp:eventHandler event="onclick" submit="false"
                id="eventHandler3">
                <xp:this.script><![CDATA[var tr0 = document.getElementById("#{id:tr1}");
tr0.style.display = "block";
    ]]></xp:this.script>
            </xp:eventHandler>
</xp:image>
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[var tr0 = document.getElementById("#{id:tr1}");
tr0.style.display = "block";]]></xp:this.script>
                </xp:eventHandler></xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr id='tr1' style="width:100%;display:none;">
            <xp:td>
                <xp:comboBox id="comboBox2"></xp:comboBox>
            </xp:td>
            <xp:td>
                <xp:comboBox id="comboBox3" style=""></xp:comboBox>
            </xp:td>
            <xp:td>
                <xp:image url="./add.png" id="image1">

                    <xp:eventHandler event="onclick" submit="false"
                        id="eventHandler1">
                        <xp:this.script><![CDATA[var tr0 = document.getElementById("#{id:tr2}");
tr0.style.display = "block";
    ]]></xp:this.script>
                    </xp:eventHandler>
                </xp:image>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr id="tr2" style="display:none;">
            <xp:td>
                <xp:comboBox id="comboBox4"></xp:comboBox>
            </xp:td>
            <xp:td>
                <xp:comboBox id="comboBox5"></xp:comboBox>
            </xp:td>
            <xp:td>
                <xp:image url="./add.png" id="image2">


                </xp:image>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr></xp:table></xp:div></xp:view>

1 个答案:

答案 0 :(得分:1)

只需使用

删除/清空显示样式类
var tr = document.getElementById("#{id:tr1}");
tr.style.display = "";

然后你会得到默认行为:在这种情况下是一个表行。