javascript - 如何通过 JavaScript/jQuery 显示隐藏的 HtmlTable "columns"？

Question

我有这样的 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");
}

响应“添加另一个日期”按钮的点击，我可以跟踪下一列要“揭开面纱”。这似乎有道理，但也许有点乏味。

是否有更简洁的方法来完成此操作？

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