title: Insert new row, hide column in Javascript?
body: <p>I have a Javascript like this:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function addRow(tableID) {
  
              var table = document.getElementById(tableID);
  
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
  
              var colCount = table.rows[0].cells.length;
  
              for(var i=0; i&lt;colCount; i++) {
  
                  var newcell = row.insertCell(i);
  
                  newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  
                  switch(newcell.childNodes[0].type) {
                      case "text":
                              newcell.childNodes[0].value = "";
                              break;
                  }
              }
          }
  
              var showMode = 'table-cell';
              if (document.all) showMode='block';
              function toggleVis(btn){
              btn   = document.forms['tcol'].elements[btn];
              cells = document.getElementsByName('t'+btn.name);
              mode = btn.checked ? showMode : 'none';
              for(j = 0; j &lt; cells.length; j++) cells[j].style.display = mode;
              }
  &lt;/script&gt;
  </code></pre>
  
  <p>The following is HTML for show/hide the columns and insert new row:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;form name="tcol" onsubmit="return false"&gt;
  Show columns
  &lt;input type=checkbox name="col1" onclick="toggleVis(this.name)" checked&gt; 1
  &lt;input type=checkbox name="col2" onclick="toggleVis(this.name)" checked&gt; 2
  &lt;input type=checkbox name="col3" onclick="toggleVis(this.name)" checked&gt; 3
  &lt;/form&gt;
  
  &lt;input type="button" value="Insert Row" onclick="addRow('dataTable')"&gt;
  &lt;table id="dataTable"&gt;
  &lt;tr&gt;
  &lt;td name="tcol1" id="tcol1"&gt;&lt;input type="text" name="txt1"&gt;&lt;/td&gt;
  &lt;td name="tcol2" id="tcol2"&gt;&lt;input type="text" name="txt2"&gt;&lt;/td&gt;
  &lt;td name="tcol3" id="tcol3"&gt;&lt;input type="text" name="txt3"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I can insert row, but only the first row's column can be hidden. Is it because of the input fields' attributes? If yes, how do I add tag attribute into new row? Please help me out on this. Thanks.</p>