我有以下代码。 ＆＃34;使用库存数据＆＃34;行可见性取决于我们在“产品类型”下拉列表中选择的内容。如果我们从下拉列表中选择Linux，那么＆＃34;使用库存数据＆＃34;行被隐藏。在下拉列表中将其更改回Windows会导致显示＆＃34;使用库存数据＆＃34;行。但是这里的Yes，No单选按钮位于文本下方＆＃34;有库存数据＆＃34;。这需要在加载页面时定位。请帮忙
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "block";
document.getElementById('inventoryCol2').style.display = "block";
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 = "";
}
}<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </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> </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"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> 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>
答案 0 :(得分：2)
<td>首先display: table-cell
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "table-cell";
document.getElementById('inventoryCol2').style.display = "table-cell";
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 = "";
}
}<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </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>
<tr>
<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b> </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"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> 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 :(得分：0)
使用visibility属性而不是显示。
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> </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> </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" /> No </label>
<label style="display:inline-block;">
<input type="radio" value="yes" onClick="warningDisplay(this)" name="inv" /> 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>