我是 HTML 新手，我正在嘗試使用 CSS 運行 JavaScript。除了我的代碼中的表格 CSS 之外，一切都運行良好。
我無法調整標題和表格資料間距（填充）問題。目前，表頭和表格資料之間存在很大的間距差異。我正在附加我當前的輸出請指導在哪里處理這種情況。
function ShowHideDiv() {
var dealPlan = document.getElementById("Deal_Type__c");
var dealdetail = document.getElementById("data-table");
var dealYear1 = document.getElementById("year-1-data");
var dealYear2 = document.getElementById("year-2-data");
var dealYear3 = document.getElementById("year-3-data");
if (dealPlan.value === "") {
dealdetail.style.display = "none";
} else if (dealPlan.value === "1 Year") {
dealdetail.style.display = "block";
dealYear1.style.display = "block";
dealYear2.style.display = "none";
dealYear3.style.display = "none";
} else if (dealPlan.value === "2 Year") {
dealdetail.style.display = "block";
dealYear1.style.display = "block";
dealYear2.style.display = "block";
dealYear3.style.display = "none";
} else if (dealPlan.value === "3 Year") {
dealdetail.style.display = "block";
dealYear1.style.display = "block";
dealYear2.style.display = "block";
dealYear3.style.display = "block";
}
}table {
border-collapse: collapse;
width: 100%;
}
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
td {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
hidden {
display: none;
}<body>
<form>
<div>
Deal Type:
<select id="Deal_Type__c" onchange="ShowHideDiv()" name="Deal_Type__c" title="Deal Type">
<option value="">--None--</option>
<option value="1 Year">1 Year</option>
<option value="2 Year">2 Year</option>
<option value="3 Year">3 Year</option>
</select><br>
</div>
<br>
<div id="data-table" style="display:none;">
<table id="html-data-table">
<tr>
<th>YEARS</th>
<th>#Applications</th>
<th>#Users</th>
</tr>
<tr id="year-1-data" style="display:none;">
<td>Year 1</td>
<td><input type="number" id="Applications_Year_1__c" name="Applications_Year_1__c" /></td>
<td><input type="number" id="Users_Year_1__c" name="Users_Year_1__c" /></td>
</tr>
<tr id="year-2-data" style="display:none;">
<td>Year 2</td>
<td><input type="number" id="Applications_Year_2__c" name="Applications_Year_2__c" /></td>
<td><input type="number" id="Users_Year_2__c" name="Users_Year_2__c" /></td>
</tr>
<tr id="year-3-data" style="display:none;">
<td>Year 3</td>
<td><input type="number" id="Applications_Year_3__c" name="Applications_Year_3__c" /></td>
<td><input type="number" id="Users_Year_3__c" name="Users_Year_3__c" /></td>
</tr>
</table>
</div>
</form>
</body>
uj5u.com熱心網友回復：
為什么會這樣？
發生這種情況是因為您已使用display: block;并且block不是<tr>.
如何解決？
使用display: revert;或display: table-row;代替。第一個將顯示屬性恢復為 DOM 中的原始屬性，第二個是<tr />元素的原始顯示屬性。
顯示代碼片段
function ShowHideDiv() {
var dealPlan = document.getElementById("Deal_Type__c");
var dealdetail = document.getElementById("data-table");
var dealYear1 = document.getElementById("year-1-data");
var dealYear2 = document.getElementById("year-2-data");
var dealYear3 = document.getElementById("year-3-data");
if (dealPlan.value === "") {
dealdetail.style.display = "none";
} else if (dealPlan.value === "1 Year") {
dealdetail.style.display = "revert";
dealYear1.style.display = "revert";
dealYear2.style.display = "none";
dealYear3.style.display = "none";
} else if (dealPlan.value === "2 Year") {
dealdetail.style.display = "revert";
dealYear1.style.display = "revert";
dealYear2.style.display = "revert";
dealYear3.style.display = "none";
} else if (dealPlan.value === "3 Year") {
dealdetail.style.display = "revert";
dealYear1.style.display = "revert";
dealYear2.style.display = "revert";
dealYear3.style.display = "revert";
}
}table {
border-collapse: collapse;
width: 100%;
}
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
td {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
hidden {
display: none;
}<body>
<form>
<div>
Deal Type:
<select id="Deal_Type__c" onchange="ShowHideDiv()" name="Deal_Type__c" title="Deal Type">
<option value="">--None--</option>
<option value="1 Year">1 Year</option>
<option value="2 Year">2 Year</option>
<option value="3 Year">3 Year</option>
</select><br>
</div>
<br>
<div id="data-table" style="display:none;">
<table id="html-data-table">
<tr>
<th>YEARS</th>
<th>#Applications</th>
<th>#Users</th>
</tr>
<tr id="year-1-data" style="display:none;">
<td>Year 1</td>
<td><input type="number" id="Applications_Year_1__c" name="Applications_Year_1__c" /></td>
<td><input type="number" id="Users_Year_1__c" name="Users_Year_1__c" /></td>
</tr>
<tr id="year-2-data" style="display:none;">
<td>Year 2</td>
<td><input type="number" id="Applications_Year_2__c" name="Applications_Year_2__c" /></td>
<td><input type="number" id="Users_Year_2__c" name="Users_Year_2__c" /></td>
</tr>
<tr id="year-3-data" style="display:none;">
<td>Year 3</td>
<td><input type="number" id="Applications_Year_3__c" name="Applications_Year_3__c" /></td>
<td><input type="number" id="Users_Year_3__c" name="Users_Year_3__c" /></td>
</tr>
</table>
</div>
</form>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527467.html