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>

它有效，但我必须使用＆＃34;丑陋＆＃34;循环。
也许有一种更有效的方法，只需说column[0].display = "none"。

Here is the fiddle.

Answer 1

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

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

JSfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用单键切换进行演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通过使用一些空的css类和jQuery，你可以在单行中实现这一点：

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

现在你可以这样做：

 jQuery(".col1").hide();

（请注意在班级名称前带点的选择器）

Answer 3

最有效的解决方案是注入和删除样式表，让浏览器完成工作。

小提琴：https://jsfiddle.net/4L4h7ea1/2/

var tab, td;

var hideFirstColumnCss = document.createElement('style');
hideFirstColumnCss.setAttribute('id', 'hideCssStyle');
hideFirstColumnCss.innerHTML = '#tab td:first-child { display: none; }';
window.onload = function () {
    tab = document.getElementById("tab");
    td = tab.getElementsByTagName("td");

}

function inv() {
    document.head.appendChild(hideFirstColumnCss);
}

function vis() {
    var style = document.getElementById('hideCssStyle');
    style.parentNode.removeChild(style);
}

Answer 4

使用行标记到达您的单元格以隐藏/显示它们。这样，您可以为行指定索引，因为所有单元格都是其行的直接子项。

var tab, td;
window.onload = function () {
    tab = document.getElementById("tab");
    tr = tab.getElementsByTagName("tr");

}

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

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

使整列消失

4 个答案: