Thursday, 1 October 2020

how to fix column position in when in row are being toggled to hide/display with none/block in a

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