隐藏表格 JavaScript 中的列

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>

原文由 Random Guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以利用 col 标记，然后仅使用普通 JavaScript 即可直接解决该问题。 col 标签只有几个 CSS 属性，但可见性是其中之一：

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

const btnHide = document.getElementById( 'btnHide' )
btnHide.addEventListener( "click", () => show_hide_column( 2, false ))

const btnShow = document.getElementById( 'btnShow' )
btnShow.addEventListener( "click", () => show_hide_column( 2, true ))

  <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Ünf</td></tr>
      <tr><td>  6</td><td>   six</td><td>    six</td><td>    sechs</td></tr>
    </table>
    <button id="btnHide">hide French</button>
    <button id="btnShow">show French</button>

参考：

• 山口
• 怪癖模式的可见性

原文由 Eineki 发布，翻译遵循 CC BY-SA 4.0 许可协议

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_no = col_no - 1;

原文由 Peter-Paul van Gemerden 发布，翻译遵循 CC BY-SA 3.0 许可协议