テーブルの列を非表示にする

Question

ここで私はインターネット上のどこかにあるスクリプトを投稿しています。今ではこのスクリプトがテーブル内にテーブルを追加する瞬間にこのスクリプトが機能しなくなってしまいます。 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> 

はここで私の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> 

そして、ここで私のフォームです：

<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

ソリューションは、純粋な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> 

あなたは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"; 
    } 
} 

参考文献：

• col
• visibility on quirksmode

Answer 2

childrenを使用し、tagNameを確認して、それらがtdであることを確認できます。このような何か：

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

編集：ここでは作業例です：http://jsfiddle.net/3DjhL/2/。

編集： 実際に、私はちょうどそれがさらに簡単にする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'; 
     } 
    } 
} 

ああ、列番号が1から始まると思われる場合は、それをどこかでオフセットする必要があります。例えばshow_hide_column()の上部にある：あなたがcolタグを活用することができた場合は

col_no = col_no - 1; 

Answer 3

私はすべての単一の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'; 
    } 
} 

は私の例では、私は（私の例では、私はいくつかのcolspansを有していた者であった）トップレベルのヘッダを設定するための最初の行を見てみます。これはoffsetLeftとoffsetWidthを使ってトップヘッダー（私の場合はサブヘッダーがある）の範囲を決定し、すべてのサブカラムがその親とトグルするようにします。

これらの値に基づいて、setClassesは適切なクラスをすべての要素に設定します。

私の例では、「col0」と「col1」を切り替えるため、表示されません（関数をもう一度実行すると再び表示されます）。