如何通过 JavaScript/jQuery 显示隐藏的 Html 表“列”？答案

【问题标题】：How can I show hidden HtmlTable "columns" via JavaScript/jQuery?如何通过 JavaScript/jQuery 显示隐藏的 Html 表“列”？
【发布时间】：2015-09-02 02:24:52
【问题描述】：

我有这样的 HtmlTable 行：

<tr>
    <td class="centertextnowrap"><strong>Description of Expense</strong></td>
    <td class="centertext"><label>Date 1: </label><input type="date" id="date1" name="date1"/></td>
    <td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>
    <td class="centertext hide"><label>Date 3: </label><input type="date" id="date3" name="date3"/></td>
    <td class="centertext hide"><label>Date 4: </label><input type="date" id="date4" name="date4"/></td>
    <td class="centertext hide"><label>Date 5: </label><input type="date" id="date5" name="date5"/></td>
    <td class="centertext hide"><label>Date 6: </label><input type="date" id="date6" name="date6"/></td>
    <td class="skybluebackground centertext"><label><strong>Total Expenses</strong></label></td>
    <td colspan="4" class="nobordercell centertext"><label>Comments</label></td>
</tr>

我有六个“列”单元格用于 Date1、Date2、... Date6

我想开始只显示 Date1，然后在必要时使其他 Date 列可见。

所以，我创建了一个“隐藏”类：

.hide {
  visibility: hidden;
  display: none;
}

...适用于除 Date1 之外的所有日期列，如上所示：

<td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>

这适用于隐藏整个列（当然，前提是我用“隐藏”类装饰每一行中的适当 td）。我计划在需要时通过这个 jQuery 使列可见：

if // add a second date column {
    $("#date2").removeClass("hide");
    $("#airfare2").removeClass("hide");
    . . .
    $("#totals2").removeClass("hide");
}

响应单击“添加另一个日期”按钮，我可以跟踪“揭幕”的下一列。这似乎是合理的，但可能有点乏味。

有没有更简洁的方法来完成这个？

【问题讨论】：

你可以使用.hasClass()和.next()

标签： javascript jquery html css html-table

【解决方案1】：

您可以将:first 选择器与hide 类一起使用。喜欢关注

    $("td.hide:first").removeClass("hide");

一个例子

$("button").click(function() {
  $("td.hide:first").removeClass("hide");
});

.hide {
    display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Column 1</td>
    <td class="hide">Column 2</td>
    <td class="hide">Column 3</td>
    <td class="hide">Column 4</td>
    <td class="hide">Column 5</td>
  </tr>
</table>
<button>Show More</button>

【讨论】：

好的，我要用这个；不过，与此同时，我还有另一个紧迫的问题，那就是我的旧代码（不是当前问题的来源）。
实际上，这不太奏效，因为每次选择“添加另一个日期”时，我都需要取消隐藏多个单元格 (tds)，而不仅仅是一个。
如果您更新您的问题或发布一个新问题，其中包含您想要取消隐藏的tds 的详细信息，我们可能会提供帮助。

【解决方案2】：

一种解决方案是使用:nth-child 选择器。例如，如果你想显示“Date 5”列，你可以这样写：

$("#tableId td:nth-child(6)").removeClass("hide")

Example Fiddle

【讨论】：

【解决方案3】：

在开头设置一个变量：

 var date = 1;

你的“添加另一个日期”按钮应该做这样的事情。

date = (date + 1);
$( '<td class="centertext hide"><label>Date: </label><input type="date" id="date"'+date' name="date"'+date'/></td>" ).appendTo( "tr" )';

【讨论】：