Ocultar columnas en la tabla JavaScript

Question

Así que aquí estoy publicando mi script que obtuve en algún lugar de Internet, ahora mi problema es que este script deja de funcionar en el momento en que agrego una tabla dentro de una tabla, entonces ¿cómo hacerlo funcionar? No necesito ninguna solución jQuery, quiero JavaScript puro. Aquí está mi guión:

<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> 

Aquí está mi 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> 

Y aquí está mi Formulario:

<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> 

Answer 1

si se puede aprovechar la etiqueta col la solución, en javascript puro, es sencillo:

<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> 

Puede aplicar a col sólo un par de atributos CSS , pero la visibilidad es uno de ellos

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"; 
    } 
} 

Referencias:

• col
• visibility on quirksmode

Answer 2

Puede usar children y verificar su tagName para asegurarse de que sean td 's. Algo como esto:

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'; 
     } 
    } 
} 

Editar: Aquí hay un ejemplo de trabajo: http://jsfiddle.net/3DjhL/2/.

Editar: De hecho, acabo de recordar los rows y cols propiedades, que lo hacen aún más simple. Vea http://jsfiddle.net/3DjhL/4/ para verlo en acción.

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'; 
     } 
    } 
} 

Ah, y si cree que los números de las columnas deben comenzar en 1 (que no lo hacen), que tendrá que compensar ese lugar. Por ejemplo en la parte superior de show_hide_column():

col_no = col_no - 1; 

Answer 3

que tenían una situación en la que habría sido una gran molestia para modificar todos los valores de TD sola y añadir el nombre de la clase apropiada para que pudiera activarlo. Como resultado, escribí algunos JavaScript para hacer eso automáticamente. Por favor mira el siguiente código

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'; 
    } 
} 

En mi ejemplo, echar un vistazo a la primera fila para establecer la cabecera de nivel superior (En mi ejemplo he tenido varios que tenía colspans). Utiliza offsetLeft y offsetWidth para determinar el rango del encabezado superior (que en mi caso tiene subcabeceras), de manera que todas las subcolumnas se alternarían con sus padres.

En función de estos valores, setClasses establece las clases apropiadas para todos los elementos.

En mi ejemplo, alternar entre "col0" y "col1", por lo que serían invisibles (al ejecutar de nuevo la función se volverían visibles).