隐藏表 JavaScript 中的列

Hiding columns in table JavaScript

提问by Random Guy

This script stops working the moment I add a table inside a table, so how to get it worked? I don't need any jQuery solutions, I want pure JavaScript. Here's my scriptfound on the Internet:

当我在表格中添加表格时，此脚本停止工作，那么如何使其工作？我不需要任何 jQuery 解决方案，我想要纯 JavaScript。这是我在互联网上找到的脚本：

<script>

  function show_hide_column(col_no, do_show) {

    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';

    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row=1; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('td')
      cels[col_no].style.display=stl;
    }
  }

</script>

Here's my HTML:

这是我的HTML：

<table id='id_of_table' border=1>
  <tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
  <tr><td>  2</td><td>   two</td><td>   deux</td><td>     zwei</td></tr>
  <tr><td>  3</td><td> three</td><td>  trois</td><td>     drei</td></tr>
  <tr><td>  4</td><td>  four</td><td>quattre</td><td>     vier</td></tr>
  <tr><td>  5</td><td>  five</td><td>   cinq</td><td>f&uuml;nf</td></tr>
  <tr><td>  6</td><td>   six</td><td>    six</td><td>    sechs</td></tr>
</table>

And here's my Form:

这是我的表格：

<form>
  Enter column no: <input type='text' name=col_no><br>
  <input type='button' onClick='javascript:show_hide_column(col_no.value,  true);' value='show'>
  <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='hide'>
</form>

回答by Eineki

If you can leverage the coltag the solution, in pure javascript, is straightforward:

如果您可以利用col标签，那么纯 javascript 中的解决方案很简单：

<table id='id_of_table' border=1>
  <col class="col1"/>
  <col class="col2"/>
  <col class="col3"/>
  <col class="col4"/>
  <tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
  <tr><td>  2</td><td>   two</td><td>   deux</td><td>     zwei</td></tr>
  <tr><td>  3</td><td> three</td><td>  trois</td><td>     drei</td></tr>
  <tr><td>  4</td><td>  four</td><td>quattre</td><td>     vier</td></tr>
  <tr><td>  5</td><td>  five</td><td>   cinq</td><td>f&uuml;nf</td></tr>
  <tr><td>  6</td><td>   six</td><td>    six</td><td>    sechs</td></tr>
</table>

You can apply to col just a couple of css attributes, but visibility is one of them

您可以仅将几个 css 属性应用于 col，但可见性是其中之一

function show_hide_column(col_no, do_show) {
   var tbl = document.getElementById('id_of_table');
   var col = tbl.getElementsByTagName('col')[col_no];
   if (col) {
     col.style.visibility=do_show?"":"collapse";
   }
}

References:

参考：

• col
• visibility on quirksmode

• 上校
• quirksmode 的可见性

回答by Peter-Paul van Gemerden

You could use childrenand check their tagNameto make sure they're td's. Something like this:

您可以使用children并检查它们tagName以确保它们是td's。像这样的东西：

function show_hide_column(col_no, do_show) {
    var tbl = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].children;
        if (col_no >= 0 && col_no < cols.length) {
            var cell = cols[col_no];
            if (cell.tagName == 'TD') cell.style.display = do_show ? 'block' : 'none';
        }
    }
}

Edit: Here's a working example: http://jsfiddle.net/3DjhL/2/.

编辑：这是一个工作示例：http: //jsfiddle.net/3DjhL/2/。

Edit: In fact, I've just remembered the rowsand colsproperties, which make it even simpler. See http://jsfiddle.net/3DjhL/4/to see it in action.

编辑：事实上，我刚刚记住了rows和cols属性，这使它变得更加简单。请参阅http://jsfiddle.net/3DjhL/4/以查看它的运行情况。

function show_hide_column(col_no, do_show) {
    var rows = document.getElementById('id_of_table').rows;

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].cells;
        if (col_no >= 0 && col_no < cols.length) {
            cols[col_no].style.display = do_show ? '' : 'none';
        }
    }
}

Oh, and if you think the column numbers should start at 1 (which they don't), you'll have to offset that somewhere. For example at the top of show_hide_column():

哦，如果你认为列号应该从 1 开始（他们没有），你将不得不在某处抵消它。例如在顶部show_hide_column()：

col_no = col_no - 1;

回答by Doug

I had a situation where it would have been a very big hassle to modify every single TD value and add the appropriate class name so I could toggle it. As a result I wrote some JavaScript to do that automatically. Please see the following code.

我遇到过这样的情况，修改每个 TD 值并添加适当的类名以便我可以切换它会非常麻烦。因此，我编写了一些 JavaScript 来自动执行此操作。请看下面的代码。

  tbl = document.getElementById("Mytable")
  classes = getClasses(tbl.rows[0]);
  setClasses(tbl, classes);
  toggleCol("col0");
  toggleCol("col1");



function getClasses(row){
    var cn = 0;
    var classes = new Array();
    for(x=0; x < row.cells.length; x++){
        var cell = row.cells[x];
        var c = new Column(cell.textContent.trim(), cell.offsetLeft, cell.offsetLeft + cell.offsetWidth, x);
        classes[x]= c;
    }
    return classes;
}

function Column(name, left, right, cols) {
    this.name = name;
    this.left = left;
    this.right = right;
    this.cols = cols;
}

function setClasses(table, classes){
    var rowSpans = new Array();
    for(x=0; x < table.rows.length; x++){
        var row = table.rows[x]; 
        for(y=0; y < row.cells.length; y++){
            var cell = row.cells[y];
            for(z=0; z < classes.length; z++){
              if(cell.offsetLeft >= classes[z].left && cell.offsetLeft <= classes[z].right){
                cell.className = "col" + classes[z].cols;
              }
            }
        }    
    }
}

function toggleCol(name){ 
  var cols = document.getElementsByClassName(name); 
  for(x=0; x < cols.length; x++){ 
    cols[x].style.display= (cols[x].style.display == 'none') ? '' : 'none'; 
   }
}

In my example I take a look at the first row to set the top level header (In my example I had several who had colspans). It uses the offsetLeft and offsetWidth to determine the range of the top header (which in my cases has sub headers), so that all sub-columns would toggle with its parent.

在我的示例中，我查看了设置顶级标题的第一行（在我的示例中，我有几个拥有 colspan 的人）。它使用 offsetLeft 和 offsetWidth 来确定顶部标题的范围（在我的情况下有子标题），以便所有子列都可以与其父列切换。

Based on these values setClasses sets the appropriate classes to all the elements.

根据这些值 setClasses 为所有元素设置适当的类。

In my example I then toggle "col0" and "col1", so they would be invisible (Running the function again would make them visible again).

在我的示例中，我然后切换“col0”和“col1”，因此它们将不可见（再次运行该函数将使它们再次可见）。