표시 블록 서식 문제

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 = ""; 

그런 다음 당신이 기본 동작을 얻을 빈/표시 스타일 클래스를 삭제 : 테이블 행을이 경우에.