隐藏表列使用Javascript

Question

我有如下表：

<table id="btt-ranges" cellspacing="0" cellpadding="0" border="0" 
    <tbody> 
     <tr> 
      <th scope="col"> </th> 
      <th id="Business" scope="col">Type of Business</th> 
      <th id="Ranges" scope="col"> Ranges</th> 
      <th scope="col">BTT</th> 
     </tr> 
     <tr> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
     </tr> 
     <tr> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
     </tr> 
     <tr> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
      <td>Example</td> 
     </tr> 
    </tbody> 
</table> 

我所要做的就是隐藏的最后一列，但我不会改变这些表是现在。 我可以使用JavaScript，到目前为止，这是我的尝试：

function show_hide_column() { 
    var tbl = document.getElementById('btt-changes'); 
    var rows = tbl.getElementsByTagName('tr'); 

    for (var row = 0; row < rows.length; row++) { 
     var cols = rows[row].children; 
     console.log(1, cols.length); 
     if (4 >= 0 && 4 < cols.length) { 
      var cell = cols[4]; 
      console.log(cell, cell.tagName); 
      if (cell.tagName == 'TD') cell.style.display = 'none'; 
     } 
    } 
} 

我能做些什么，而不触及表？

Answer 1

此选择THES的cols细胞（TH和TD），然后隐藏它们（fiddle）：

var lastColHeader = Array.prototype.slice.call(document.querySelectorAll('th:last-child', '#btt-ranges'), 0); // get the header cell 
var lastColCells = Array.prototype.slice.call(document.querySelectorAll('td:last-child', '#btt-ranges'), 0).concat(lastColHeader); // get the column cells, and add header 

lastColCells.forEach(function(cell) { // iterate and hide 
    cell.style.display = 'none'; 
}); 

Answer 2

您无需为此使用JavaScript。您可以使用CSS选择器来隐藏最后一栏

#btt-ranges tr td:last-child { display: none; } 

编辑：刚刚意识到你特别需要做的是在JavaScript。不知道是否有任何方法可以在不触摸桌子的情况下追加样式。