title: Hide a table column with Javascript
body: <p>I have the following table:</p>
  
  <pre><code>&lt;table id="btt-ranges" cellspacing="0" cellpadding="0" border="0" 
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th scope="col"&gt; &lt;/th&gt;
              &lt;th id="Business" scope="col"&gt;Type of Business&lt;/th&gt;
              &lt;th id="Ranges" scope="col"&gt; Ranges&lt;/th&gt;
              &lt;th scope="col"&gt;BTT&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
              &lt;td&gt;Example&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What I have to do is hide the last column, but I can't change how the table is right now.
  I can use Javascript and so far this is what I tried:</p>
  
  <pre><code>function show_hide_column() {
      var tbl = document.getElementById('btt-changes');
      var rows = tbl.getElementsByTagName('tr');
  
      for (var row = 0; row &lt; rows.length; row++) {
          var cols = rows[row].children;
          console.log(1, cols.length);
          if (4 &gt;= 0 &amp;&amp; 4 &lt; cols.length) {
              var cell = cols[4];
              console.log(cell, cell.tagName);
              if (cell.tagName == 'TD') cell.style.display = 'none';
          }
      }
  }
  </code></pre>
  
  <p>What can I do without touching the table?</p>