I am attempting to toggle the visibility of certain elements upon clicking an image, however, the table formatting is not rendering correctly. Am I making a mistake somewhere? Attached below is the outcome. I have also experimented with custom styling but it did not produce the desired result.
<?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>