title: Add a Table Column dynamically using checkbox in javascript
body: <p>The following is my source code</p>
  
  <p>I need to add table column dynamically using checkbox in javascript and if I uncheck the checkbox, it needs to be disable the particular column in table and if I again click the same checkbox, the column should appear at same location so please help me to rectify the problem....</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;1.Table&lt;/title&gt;
      &lt;style&gt;
      #Whole-Wrapper
      {
          background:gray;
          height:700px;
      }
  
      h1{text-align:center;}
  
      table,th,td
      {
          border:1px solid black;
          border-collapse:collapse;
      }
  
      td{padding:10px;}
  
      #Wrapper
      {
          width:90%;
          margin:10% auto;
          border:1px solid black;
      }
  
      #div1
      {
          float:left;
          width:50%;
          background:lightblue;
      }
  
  
      #div2
      {
          float:left;
          width:50%;
          background:lightyellow;
          height:256px;
      }
  
      #ClearFix
      {
          clear:both;
      }
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="Whole-Wrapper"&gt;
  &lt;h1&gt;Create Table Using Checkbox&lt;/h1&gt;
      &lt;div id="Wrapper"&gt;
  
          &lt;div id="div1"&gt;
              &lt;h2&gt;First Column&lt;/h2&gt;
              &lt;input type="checkbox" id="chk1" onclick="myFunction(1)"&gt;&lt;label&gt;First Checkbox&lt;/label&gt;&lt;br&gt;&lt;br&gt;
              &lt;input type="checkbox" id="chk2" onclick="myFunction(2)"&gt;&lt;label&gt;Second Checkbox&lt;/label&gt;&lt;br&gt;&lt;br&gt;
              &lt;input type="checkbox" id="chk3" onclick="myFunction(3)"&gt;&lt;label&gt;Third Checkbox&lt;/label&gt;&lt;br&gt;&lt;br&gt;
              &lt;input type="checkbox" id="chk4" onclick="myFunction(4)"&gt;&lt;label&gt;Fourth Checkbox&lt;/label&gt;&lt;br&gt;&lt;br&gt;
              &lt;input type="checkbox" id="chk5" onclick="myFunction(5)"&gt;&lt;label&gt;Fifth Checkbox&lt;/label&gt;&lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
  
          &lt;div id="div2"&gt;
              &lt;h2&gt;Second Column&lt;/h2&gt;
              &lt;table id="mtTbl"&gt;
                  &lt;tr id="Head"&gt;&lt;/tr&gt;
  
                  &lt;tr id="Tr1"&gt;&lt;/tr&gt;
  
                  &lt;tr id="Tr2"&gt;&lt;/tr&gt;
  
                  &lt;tr id="Tr3"&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div id="ClearFix"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
      &lt;script&gt;
      function myFunction(cellNo)
      {
          var a = document.getElementById("chk"+cellNo);
  
          if(a.checked)
          {
              var x = document.createElement("TH");
              var y = document.createTextNode("Table Header"+cellNo);
              x.appendChild(y);
              document.getElementById("Head").appendChild(x);
  
              var x1 = document.createElement("TD");
              var y1 = document.createTextNode("Row"+cellNo);
              x1.appendChild(y1);
              document.getElementById("Tr1").appendChild(x1);
  
              var x2 = document.createElement("TD");
              var y2 = document.createTextNode("Row"+cellNo);
              x2.appendChild(y2);
              document.getElementById("Tr2").appendChild(x2);
  
              var x3 = document.createElement("TD");
              var y3 = document.createTextNode("Row"+cellNo);
              x3.appendChild(y3);
              document.getElementById("Tr3").appendChild(x3);
          }
          else 
          {
              var delHead = document.getElementById("Head");
              delHead.deleteCell(cellNo-1);
  
              var col1 = document.getElementById("Tr1");
              col1.deleteCell(cellNo-1);
  
              var col2 = document.getElementById("Tr2");
              col2.deleteCell(cellNo-1);
  
              var col3 = document.getElementById("Tr3");
              col3.deleteCell(cellNo-1);
  
  
              /*var delHead = document.getElementById("Head");
              delHead.deleteCell(cellNo-cellNo);
  
              var col1 = document.getElementById("Tr1");
              col1.deleteCell(cellNo-cellNo);
  
              var col2 = document.getElementById("Tr2");
              col2.deleteCell(cellNo-cellNo);
  
              var col3 = document.getElementById("Tr3");
              col3.deleteCell(cellNo-cellNo);
  
              var col4 = document.getElementById("Tr4");
              col4.deleteCell(cellNo-cellNo)
  
              var b = document.getElementById("Head");
              b.style.display = "chk"+cellNo.checked ? "block" : "none";
  
              var c = document.getElementById("Tr1");
              c.style.display = "chk"+cellNo.checked ? "block" : "none";
  
              var d = document.getElementById("Tr2");
              d.style.display = "chk"+cellNo.checked ? "block" : "none";
  
              var e = document.getElementById("Tr3");
              e.style.display = "chk"+cellNo.checked ? "block" : "none";*/
              }
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>