how to fix column position in <table> when <input> in <td> in a <tr> row are being toggled to hide/display with none/block

Question

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>

Answer 1

Do you want like this ?:

 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>

Or do you want like that ?:

 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

Well as you see there is nothing swifting when you expand or contract the columns. So if you see any swifts could you like put a picture of the with 1 column and with 2 columns so I could see if there is a difference and then I might be able to help you.

 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

I solved the problem. I needed to set the css value display:grid. This is the behavior I was looking for. With this display:grid, the columns remain fixed even as new columns are deleted or added. Thank you everyone for your input!

This css was added to the table: display:grid

Answer 4

I guess you can acheive this with help of CSS, please find the code below and let me know if anything is missing.

Major change is added below CSS and removed the corresponding from 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>