使整列消失

Question

如何使用普通JS使表中的左列消失？

这是我的方法:

<table id="tab" border="1">
    <tr>
        <td>abc</td>
        <td>def</td>
    </tr>
    <tr>
        <td>ghi</td>
        <td>jkl</td>
    </tr>
    <tr>
        <td>mno</td>
        <td>pqr</td>
    </tr>
</table>

<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>

<script>
var tab, td;
window.onload = function() {
    tab = document.getElementById("tab");
    td = tab.getElementsByTagName("td");
}

function inv() {
    for (i = 0; i < td.length; i++) {
        td[i].style.display = "none";
        i++;
    }
}

function vis() {
    for (i = 0; i < td.length; i++) {
        td[i].style.display = "block";
        i++;
    }
}
</script>

它有效,但我必须使用"丑陋"的循环.
也许只是说一个更有效的方式column[0].display = "none".

这是小提琴.

Answer 1

利用CSS层次结构和nth-child选择器.

使用selector tr td:nth-child(1)选择所有第一列td元素.

的jsfiddle

var tab;
// Use DOMContentLoaded instead of load event
document.addEventListener('DOMContentLoaded', function() {
  tab = document.getElementById('tab');
});

function inv() {
  tab.classList.add('hide');
}

function vis() {
  tab.classList.remove('hide');
}

.hide tr td:nth-child(1) {
  display: none;
}

<table id="tab" border="1">
  <tr>
    <td>abc</td>
    <td>def</td>
  </tr>
  <tr>
    <td>ghi</td>
    <td>jkl</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>

使用单按钮切换演示.

function toggle() {
  document.getElementById('tab').classList.toggle('hide');
}

.hide tr td:nth-child(1) {
  display: none;
}

<table id="tab" border="1">
  <tr>
    <td>abc</td>
    <td>def</td>
  </tr>
  <tr>
    <td>ghi</td>
    <td>jkl</td>
  </tr>
  <tr>
    <td>mno</td>
    <td>pqr</td>
  </tr>
</table>
<button onclick="toggle()">Toggle</button>