2016-07-20 2 views
0

Ich habe den folgenden Code. Die Zeilensichtbarkeit "mit Bestandsdaten" hängt davon ab, was wir in der Dropdown-Liste des Produkttyps auswählen. Wenn wir Linux aus dem Dropdown-Menü auswählen, wird die Zeile "Mit Inventardaten" ausgeblendet. Wenn Sie im Dropdown-Menü zu Windows zurückkehren, wird die Zeile "Mit Inventardaten" angezeigt. Aber hier wird der Auswahlknopf Ja, Nein unterhalb des Textes "Mit Inventardaten" angezeigt. Dies muss so positioniert werden, wie es beim Laden der Seite positioniert wurde. Bitte helfenDer Anzeigeblock und keiner ändert die Tabelle Einrückung

var flag = 1; 
 
      \t function showHide() { 
 
      \t \t 
 
      \t \t if (flag == 1) { 
 
      \t \t \t document.getElementById('warning').style.display = "none"; 
 
      \t \t \t document.getElementById('inventoryCol1').style.display = "none"; 
 
      \t \t \t document.getElementById('inventoryCol2').style.display = "none"; 
 
      \t \t \t flag=0; 
 
      \t \t \t 
 
      \t \t } 
 
      \t \t else { 
 
      \t \t \t document.getElementById('warning').style.display = "block"; 
 
      \t \t \t document.getElementById('inventoryCol1').style.display = "block"; 
 
      \t \t \t document.getElementById('inventoryCol2').style.display = "block"; 
 
      \t \t \t flag=1; 
 
      \t \t } 
 
      \t } 
 
      \t function warningDisplay(myRadio) { 
 
      \t \t if(myRadio.value == "yes") { 
 
      \t \t \t document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data"; 
 
      \t \t } 
 
      \t \t else { 
 
      \t \t \t document.getElementById('warning').innerHTML = ""; 
 
      \t \t } 
 
      \t }
<html> 
 
      <body style="background-color:green">    \t \t \t 
 
<table> 
 
      \t \t \t \t 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t <td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label></td> 
 
      \t \t \t \t \t <td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" > 
 
      \t \t \t \t \t \t <option value="win">Windows</option> 
 
      \t \t \t \t \t \t <option value="lin">Linux</option> 
 
      \t \t \t \t \t \t </select> 
 
      \t \t \t \t \t </td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t 
 
      \t \t \t \t \t <td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b>&nbsp;&nbsp;</label></td> 
 
      \t \t \t \t \t <td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2"> 
 
      \t \t \t \t \t \t <label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/>&nbsp;No &nbsp; &nbsp; &nbsp; </label> 
 
      \t \t \t \t \t \t <label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/>&nbsp;Yes</label> 
 
      \t \t \t \t \t </td> \t \t \t \t \t 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t \t <td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t <td colspan='2' align="center"><input name="submit" 
 
      \t \t \t \t \t \t type="submit" class="login" value="Submit"></td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t </table> 
 
    </body> 
 
    </html>

+3

Es ist ein Tisch. Verwenden Sie 'display: table-cell' –

Antwort

2

<td> haben initialy display: table-cell

var flag = 1; 
 
      \t function showHide() { 
 
      \t \t 
 
      \t \t if (flag == 1) { 
 
      \t \t \t document.getElementById('warning').style.display = "none"; 
 
      \t \t \t document.getElementById('inventoryCol1').style.display = "none"; 
 
      \t \t \t document.getElementById('inventoryCol2').style.display = "none"; 
 
      \t \t \t flag=0; 
 
      \t \t \t 
 
      \t \t } 
 
      \t \t else { 
 
      \t \t \t document.getElementById('warning').style.display = "block"; 
 
      \t \t \t document.getElementById('inventoryCol1').style.display = "table-cell"; 
 
      \t \t \t document.getElementById('inventoryCol2').style.display = "table-cell"; 
 
      \t \t \t flag=1; 
 
      \t \t } 
 
      \t } 
 
      \t function warningDisplay(myRadio) { 
 
      \t \t if(myRadio.value == "yes") { 
 
      \t \t \t document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data"; 
 
      \t \t } 
 
      \t \t else { 
 
      \t \t \t document.getElementById('warning').innerHTML = ""; 
 
      \t \t } 
 
      \t }
<html> 
 
      <body style="background-color:green">    \t \t \t 
 
<table> 
 
      \t \t \t \t 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t <td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label></td> 
 
      \t \t \t \t \t <td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" > 
 
      \t \t \t \t \t \t <option value="win">Windows</option> 
 
      \t \t \t \t \t \t <option value="lin">Linux</option> 
 
      \t \t \t \t \t \t </select> 
 
      \t \t \t \t \t </td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t <td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b>&nbsp;&nbsp;</label></td> 
 
      \t \t \t \t \t <td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2"> 
 
      \t \t \t \t \t \t <label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/>&nbsp;No &nbsp; &nbsp; &nbsp; </label> 
 
      \t \t \t \t \t \t <label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/>&nbsp;Yes</label> 
 
      \t \t \t \t \t </td> \t \t \t \t \t 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t \t <td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t 
 
      \t \t \t \t <tr> 
 
      \t \t \t \t \t <td colspan='2' align="center"><input name="submit" 
 
      \t \t \t \t \t \t type="submit" class="login" value="Submit"></td> 
 
      \t \t \t \t </tr> 
 
      \t \t \t \t </table> 
 
    </body> 
 
    </html>

+0

Ja, und er vermisst auch ein Tag unter dem ersten Tag, das auch dieses Verhalten verursachen kann – Verthosa

+0

danke für die Nachricht –

+0

Sorry, dass war Copy-Paste übersehen – Joshi

0

Verwenden visibility Eigenschaft anstelle der Anzeige.

var flag = 1; 
 

 
function showHide() { 
 

 
    if (flag == 1) { 
 
    document.getElementById('warning').style.visibility = "hidden"; 
 
    document.getElementById('inventoryCol1').style.visibility = "hidden"; 
 
    document.getElementById('inventoryCol2').style.visibility = "hidden"; 
 
    flag = 0; 
 

 
    } else { 
 
    document.getElementById('warning').style.visibility = "visible"; 
 
    document.getElementById('inventoryCol1').style.visibility = "visible"; 
 
    document.getElementById('inventoryCol2').style.visibility = "visible"; 
 
    flag = 1; 
 
    } 
 
} 
 

 
function warningDisplay(myRadio) { 
 
    if (myRadio.value == "yes") { 
 
    document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data"; 
 
    } else { 
 
    document.getElementById('warning').innerHTML = ""; 
 
    } 
 
}
#warning, 
 
#inventoryCol1, 
 
#inventoryCol2 { 
 
    display: block; 
 
}
<html> 
 

 
<body style="background-color:green"> 
 
    <table> 
 

 
    <tr> 
 
     <td> 
 
     <label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label> 
 
     </td> 
 
     <td> 
 
     <select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()"> 
 
      <option value="win">Windows</option> 
 
      <option value="lin">Linux</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 
    <td style="color: white;text-align: left; " id="inventoryCol1"> 
 
     <label><b>With Inventory Data</b>&nbsp;&nbsp;</label> 
 
    </td> 
 
    <td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2"> 
 
     <label style="display:inline-block;"> 
 
     <input type="radio" value="no" onClick="warningDisplay(this)" name="inv" />&nbsp;No &nbsp; &nbsp; &nbsp;</label> 
 
     <label style="display:inline-block;"> 
 
     <input type="radio" value="yes" onClick="warningDisplay(this)" name="inv" />&nbsp;Yes</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td colspan='2' align="center"> 
 
     <input name="submit" type="submit" class="login" value="Submit"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

+1

Mind the lücke. Wenn Sie größere Formulare mit mehreren bedingten Anzeigen haben, wäre das Formular voller unsetischer Lücken –

Verwandte Themen