如何固定列位置<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>