Nascondere le colonne nella tabella JavaScript

Question

Quindi qui sto postando il mio script che ho trovato da qualche parte su Internet, ora il mio problema è che questo script smette di funzionare nel momento in cui aggiungo un tavolo all'interno di un tavolo, quindi come farlo funzionare? Non ho bisogno di alcuna soluzione jQuery, voglio puro JavaScript. Ecco la mia sceneggiatura:

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

Ecco il mio 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> 

Ed ecco il mio Modulo:

<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

Se è possibile sfruttare il tag col la soluzione, in puro JavaScript, è semplice:

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

È possibile applicare a col solo un paio di attributi CSS , ma la visibilità è uno di loro

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

Riferimenti:

• col
• visibility on quirksmode

Answer 2

È possibile utilizzare children e controllare il loro tagName per assicurarsi che siano td. Qualcosa di simile a questo:

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: Ecco un esempio di lavoro: http://jsfiddle.net/3DjhL/2/.

Edit: In realtà, ho appena ricordato le rows e cols proprietà, che lo rendono ancora più semplice. Vedi http://jsfiddle.net/3DjhL/4/ per vederlo in azione.

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, e se pensate che i numeri di colonna dovrebbero iniziare a 1 (che non lo fanno), dovrete per compensare che da qualche parte. Per esempio nella parte superiore di show_hide_column():

col_no = col_no - 1; 

Answer 3

ho avuto una situazione in cui sarebbe stato un grande seccatura per modificare ogni valore singolo TD e aggiungere il nome della classe appropriata così ho potuto attivarla. Di conseguenza ho scritto alcuni JavaScript per farlo automaticamente. Si prega di consultare il seguente codice.

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

Nel mio esempio ho date un'occhiata alla prima fila per impostare l'intestazione di livello superiore (Nel mio esempio ho avuto diversi che aveva colspans). Utilizza offsetLeft e offsetWidth per determinare l'intervallo dell'intestazione superiore (che nei miei casi ha intestazioni secondarie), in modo che tutte le sottocolonne si alternino con il relativo genitore.

Sulla base di questi valori setClasses imposta le classi appropriate per tutti gli elementi.

Nel mio esempio, quindi, commutare "col0" e "col1", in modo da renderli invisibili (eseguire nuovamente la funzione li renderebbe nuovamente visibili).