My number of columns in my 2x2 table expand or contract based on the value chosen in the select, 1 or 2. Currently, as the columns increase or decrease, the column position(s) on the screen shift wildly about. How can I fix the column on the screen no matter how many columns appear in a row?
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>
from how to fix column position in when in row are being toggled to hide/display with none/block
in a |
No comments:
Post a Comment