css - 显示 block 格式问题

Question

我试图在点击某些图像时显示/隐藏，但 tr 的格式非常错误。难道我做错了什么？？附件是结果。我也尝试过添加自定义格式，但也没有用。

<?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>

Answer 1

只需删除/清空显示样式类

var tr = document.getElementById("#{id:tr1}");
tr.style.display = "";

然后您将获得默认行为:在本例中为表格行。