如何修复列在行<table>中的位置被<input> <td> <tr> 切换为隐藏/显示无/块

我的2x2表中的列数根据select中选择的值(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>

你想要这样吗？：

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>

正如您所看到的，当您扩展或收缩列时，没有任何变化。所以，若你们看到任何雨燕，你们可以放一张有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>

我解决了这个问题。我需要设置css值display:grid。这就是我想要的行为。使用此显示：栅格，即使删除或添加了新列，列也保持固定。感谢大家的投入！

此css已添加到表中：显示：网格

我想你可以在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>

相关内容

最新更新

热门标签：