CODEWITHSUNDEEP
javascripthtmlcss
ABeckley
ABeckley

Reputation: 1

Radio buttons to show/hide html table columns

I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show.  User would select a radio button to additionally display either columns 2&3 or column 4

I have found code that hides the column groups, but the radio buttons in side the column still display. I am trying to collapse the columns and everything inside of them too. I am teaching myself CSS and I know nothing about javascript so it could just be user error.

<!DOCTYPE html>

<!--       cg2.Style.visibility="hidden"
       cg3.Style.visibility="hidden"
       cg4.Style.visibility="hidden"-->

</script>
</head>

    <body onload="vbscript:Startup window.dialogarguments">
    <form name="baseform" id="baseform" action="" method="post">

    <div id="showhide">
          <label><input type="radio" name="T_097_WD"  id="T_097lft" value="L1M"  />this button Shows columns 2 & 3
          </label> &emsp;&emsp;
          <label><input type="radio" name="T_097_WD"  id="T_097slv" value="SLV"  />this button Shows  column 4
          </label>
    </div>

<table border="1"  style="width:50%" >
 <COLGROUP id=cg1></COLGROUP>
 <COLGROUP id=cg2></COLGROUP>
 <COLGROUP id=cg3></COLGROUP>
 <COLGROUP id=cg4></COLGROUP>
    <tr>
        <td>Never hide this column</td>
        <td>column collapsed on startup</td>
        <td>column collapsed on startup</td>
        <td>column collapsed on startup</td>
    </tr>
    <tr>
        <td>Q2</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q3</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q4</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q5</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>

</table>

Upvotes: 0

Views: 2490

Answers (2)

Dave
Dave

Reputation: 10924

If I understand you correctly, the following solution should work for you.

var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
  if (e.target.tagName === "INPUT" && e.target.type === "radio") {
    //get radio value
    var value = document.querySelector('input[type="radio"]:checked').value;
    
    //get items by column
    var one = document.querySelectorAll("td:nth-child(1)");
    var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
    var four = document.querySelectorAll("td:nth-child(4)");
    
    //hide all columns
    hideOrShow(one, false);
    hideOrShow(twothree, false);
    hideOrShow(four, false);
    
    //show selected columns
    switch (value) {
      case "one":
        hideOrShow(one, true);
        break;
      case "twothree":
        hideOrShow(twothree, true);
        break;
      case "four":
        hideOrShow(four, true);
        break;
    }
  }
});

function hideOrShow(nodes, show) {
  [].forEach.call(nodes, function(item) {
    item.style.display = show ? "inline-block" : "none";
  });
}

//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);
<div id="selection">
  <label>
    First
    <input type="radio" name="shown" value="one" checked />
  </label>
  <label>
    Two and Three
    <input type="radio" name="shown" value="twothree" />
  </label>
  <label>
    Four
    <input type="radio" name="shown" value="four" />
  </label>
</div>
<table border="1">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
</table>

Upvotes: 3

Phil
Phil

Reputation: 2807

I'm making the assumption that you are not able to reference a column in a table, rather than needing information on responding to radio button events. Assuming this is the case, read on.

Add a class to each table element so that you can identify which elements belong to which rows. Then based on a radio button event, run a function to hide all elements with the appropriate class name.

For example 

<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>

Now you can use jQuery to do something like:

$('.col2').hide();

Each cell with the class col2 will be hidden, which means every cell in the second column.

You should be able to find the appropriate code to respond to radio button change events on the web if you don't already know it.

Upvotes: 0

Related Questions