Question

如何在html表格中显示/隐藏任何tr/td？我应该能够隐藏屏幕截图中显示的任何tr / td。

<table id="tableEditor" >
  <tr>
    <td>Country</td>
    <td style="text-align:left;">
      <select name="select">
        <option value="value1">USA</option>
        <option value="value2"  >Sweden</option>
        <option value="value3">Norway</option>
      </select>
    </td>
    <td>Inventory ID</td>
    <td style="text-align:left;">$123.23</td>
    <td>Cost</td>
    <td style="text-align:left;">$312.21</td>
    <td>Description</td>
    <td style="text-align:left;">this is a description</td>
  </tr>

</table>

CSS：

#tableEditor {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 5px;
  border: 1px solid #000;
  background: #fff;
}

body,
th,
td {
  font: normal 12pt Verdana;
}

table {
  border-collapse: collapse;
  margin: 1em 0 0 0;
}

th,
td {
  text-align: left;
  border: 1px solid #ccc;
  padding: 2px 5px 2px 2px;
}

这是我的JSFIDDLE

Answer 1

如果你包含jQuery，你需要做的就是：

$("td:nth-of-type(3), td:nth-of-type(4)").hide();

这是你小提琴的一个分支：https://jsfiddle.net/ccbsa9z3/2/

你也可以用CSS做同样的事情，虽然我假设你需要以编程方式执行此操作。使用CSS，它是以下内容：

td:nth-of-type(3), td:nth-of-type(4) {
    display: none;
}

Answer 2

如果您想仅使用CSS隐藏它，请使用:nth-of-type()：

td:nth-of-type(2),
td:nth-of-type(3) {
  display: none;
}

JSFiddle Demo

Answer 3

要使用Javascript隐藏元素，请使用

element.style.visibility = "hidden";

要使用CSS隐藏元素，请使用

visibility: hidden;

要使用CSS完全删除元素，请使用

display: none;

我updated your fiddle使用这些方法隐藏任意TD。

Answer 4

DEMO

您可以使用.toggle()

描述：显示或隐藏匹配的元素。

$('#tableEditor tr').find('td:nth-child(3)').toggle();

$('#tableEditor tr').find('td:nth-child(4)').toggle();
您还可以添加一个显示无
的类
$('#tableEditor tr').find('td:nth-child(3)').addClass('hidden');

$('#tableEditor tr').find('td:nth-child(4)').addClass('hidden');

Answer 5

您应该将列标题放在thead元素上，将内容放在tbody中：

<table id="tableEditor">
    <thead>
        <tr>
            <td>Country</td>
            <td>Inventory ID</td>
            <td>Cost</td>
            <td>Description</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td style="text-align:left;">
            <select name="select">
                <option value="value1">USA</option>
                <option value="value2"  >Sweden</option>
                <option value="value3">Norway</option>
            </select>
        </td>

        <td style="text-align:left;">$123.23</td>
        <td style="text-align:left;">$312.21</td>
        <td style="text-align:left;">this is a description</td>
    </tr>
    </tbody>
</table>

或者，您可以将要隐藏的每个单元格的display设置为none。

您可以在行动here中看到这一点。

显示/隐藏Html TR / TD

5 个答案: