如何固定列位置<table>什么時候<input>在<td>在一個<tr>行被切換為隱藏/顯示無/塊

Question

我的 2x2 表中的列數根據選擇中選擇的值（1 或 2）擴展或收縮。目前，隨着列的增加或減少，屏幕上的列位置會發生劇烈變化。 無論一行中出現多少列，如何修復屏幕上的列？

 function myFunction() { var x = document.getElementById("mySelect").value; var tbl = document.getElementById("myTable"); var row = tbl.getElementsByTagName("tr"); switch (x) { case "1": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j == 0) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; case "2": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j < 2) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; default: } }

 <select id="mySelect" onchange="myFunction()"> <option value="Select">Select One</option> <option value="1">1</option> <option value="2">2</option> </select> <TABLE id="myTable" style="border-spacing: 25px 10px; width:75%" cellspacing="0"> <TR> <TD class="column1" align="left"> <div> <input value="0"></input> </div> </TD> <TD class="column2" align="left"> <div> <input value="0"></input> </div> </TD> </TR> <TR> <TD class="column1" align="left"> <div> <input value="0"></input> </div> </TD> <TD class="column2" align="left"> <div> <input value="0"></input> </div> </TD> </TR> </TABLE>

Answer 1

你想要這樣嗎？：

 function myFunction() { var x = document.getElementById("mySelect").value; var tbl = document.getElementById("myTable"); var row = tbl.getElementsByTagName("tr"); for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < x; j++) { tds[j].style.display = "block"; } for(var j = x; j < tds.length; j++){ tds[j].style.display = "none"; } } }

 input{ width: 100%; max-width:177px; }

 <select id="mySelect" onchange="myFunction()"> <option value="Select">Select One</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <TABLE id="myTable" style ="border-spacing: 25px 10px; width:75%" cellspacing="0"> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column3" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column4" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column5" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column6" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column7" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column8" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column9" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column10" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column3" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column4" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column5" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column6" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column7" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column8" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column9" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column10" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> </TABLE>

或者你想要那樣？：

 function myFunction() { var x = document.getElementById("mySelect").value; var tbl = document.getElementById("myTable"); var row = tbl.getElementsByTagName("tr"); for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < x; j++) { tds[j].style.visibility = "visible"; } for(var j = x; j < tds.length; j++){ tds[j].style.visibility = "hidden"; } } }

 input{ width: 100%; max-width: 177px; }

 <select id="mySelect" onchange="myFunction()"> <option value="Select">Select One</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <TABLE id="myTable" style ="border-spacing: 25px 10px; width:75%" cellspacing="0"> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column3" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column4" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column5" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column6" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column7" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column8" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column9" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column10" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column3" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column4" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column5" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column6" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column7" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column8" align = "left" > <div> <input value = "0"></input> </div> </TD> <TD class="column9" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column10" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> </TABLE>

Answer 2

正如您所看到的，當您擴展或收縮列時，沒有任何事情會發生。 所以，如果你看到任何雨燕，你能不能放一張有 1 列和 2 列的圖片，這樣我就可以看看是否有區別，然后我也許可以幫助你。

 function myFunction() { var x = document.getElementById("mySelect").value; var tbl = document.getElementById("myTable"); var row = tbl.getElementsByTagName("tr"); switch (x) { case "1": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j==0) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; case "2": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j<2) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; default: } }

 <TABLE id="myTable" style ="border-spacing: 25px 10px; width:75%" cellspacing="0"> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> <TR> <TD class="column1" align = "left"> <div> <input value = "0"></input> </div> </TD> <TD class="column2" align = "left" > <div> <input value = "0"></input> </div> </TD> </TR> </TABLE> <select id="mySelect" onchange="myFunction()"> <option value="Select">Select One</option> <option value="1">1</option> <option value="2">2</option> </select>

Answer 3

我解決了這個問題。 我需要設置 css 值 display:grid。 這是我一直在尋找的行為。 使用此 display:grid，即使刪除或添加新列，列仍保持固定。 感謝大家的投入！

此 css 已添加到表中：display:grid

Answer 4

我想你可以在 CSS 的幫助下實現這一點，請找到下面的代碼，如果有任何遺漏，請告訴我。

在 CSS 下方添加了主要更改，並從 HTML 中刪除了相應的更改。

table {
  width: 100%;
}

input {
  width: 100%;
}

 function myFunction() { var x = document.getElementById("mySelect").value; var tbl = document.getElementById("myTable"); var row = tbl.getElementsByTagName("tr"); switch (x) { case "1": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j == 0) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; case "2": for (var i = 0; i < row.length; i++) { var tds = row[i].getElementsByTagName("input"); for (var j = 0; j < tds.length; j++) { if (j < 2) { tds[j].style.display = "block"; } else { tds[j].style.display = "none"; } } } break; default: } }

 table { width: 100%; } input { width: 100%; }

 <select id="mySelect" onchange="myFunction()"> <option value="Select">Select One</option> <option value="1">1</option> <option value="2">2</option> </select> <TABLE id="myTable" style="border-spacing: 25px 10px;" cellspacing="0"> <TR> <TD class="column1"> <div> <input value="0"></input> </div> </TD> <TD class="column2"> <div> <input value="0"></input> </div> </TD> </TR> <TR> <TD class="column1"> <div> <input value="0"></input> </div> </TD> <TD class="column2"> <div> <input value="0"></input> </div> </TD> </TR> </TABLE>