显示隐藏表单元素Jquery/Bootstrap

Question

我有一组表单字段(通过wtform生成)，我只需要显示一个，然后有一个add按钮：

<div class=element-work>

            <table id="identifier-0"><tr><th><label for="identifier-0-organization">Organization</label></th><td><input id="identifier-0-organization" name="identifier-0-organization" type="text" value=""></td></tr><tr><th><label for="identifier-0-position">Position</label></th><td><input id="identifier-0-position" name="identifier-0-position" type="text" value=""></td></tr><tr><th><label for="identifier-0-start_time">Start</label></th><td><input id="identifier-0-start_time" name="identifier-0-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-0-end_time">End</label></th><td><input id="identifier-0-end_time" name="identifier-0-end_time" type="text" value=""></td></tr></table>

            <table id="identifier-1"><tr><th><label for="identifier-1-organization">Organization</label></th><td><input id="identifier-1-organization" name="identifier-1-organization" type="text" value=""></td></tr><tr><th><label for="identifier-1-position">Position</label></th><td><input id="identifier-1-position" name="identifier-1-position" type="text" value=""></td></tr><tr><th><label for="identifier-1-start_time">Start</label></th><td><input id="identifier-1-start_time" name="identifier-1-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-1-end_time">End</label></th><td><input id="identifier-1-end_time" name="identifier-1-end_time" type="text" value=""></td></tr></table>

            <table id="identifier-2"><tr><th><label for="identifier-2-organization">Organization</label></th><td><input id="identifier-2-organization" name="identifier-2-organization" type="text" value=""></td></tr><tr><th><label for="identifier-2-position">Position</label></th><td><input id="identifier-2-position" name="identifier-2-position" type="text" value=""></td></tr><tr><th><label for="identifier-2-start_time">Start</label></th><td><input id="identifier-2-start_time" name="identifier-2-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-2-end_time">End</label></th><td><input id="identifier-2-end_time" name="identifier-2-end_time" type="text" value=""></td></tr></table>

            <table id="identifier-3"><tr><th><label for="identifier-3-organization">Organization</label></th><td><input id="identifier-3-organization" name="identifier-3-organization" type="text" value=""></td></tr><tr><th><label for="identifier-3-position">Position</label></th><td><input id="identifier-3-position" name="identifier-3-position" type="text" value=""></td></tr><tr><th><label for="identifier-3-start_time">Start</label></th><td><input id="identifier-3-start_time" name="identifier-3-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-3-end_time">End</label></th><td><input id="identifier-3-end_time" name="identifier-3-end_time" type="text" value=""></td></tr></table>

            <table id="identifier-4"><tr><th><label for="identifier-4-organization">Organization</label></th><td><input id="identifier-4-organization" name="identifier-4-organization" type="text" value=""></td></tr><tr><th><label for="identifier-4-position">Position</label></th><td><input id="identifier-4-position" name="identifier-4-position" type="text" value=""></td></tr><tr><th><label for="identifier-4-start_time">Start</label></th><td><input id="identifier-4-start_time" name="identifier-4-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-4-end_time">End</label></th><td><input id="identifier-4-end_time" name="identifier-4-end_time" type="text" value=""></td></tr></table>

</div>

我的选择：

1)用页面加载所有字段，根据需要使用js显示/隐藏字段

2)按下按钮时有js克隆/添加字段

这两种方法都可以，但选项1目前的工作最少(但我想，从长远来看，对于数十亿个查询来说，更多的带宽消耗，但我现在并不担心这一点)：用jquery/bootstrap隐藏必要的后续部分的最简单方法是什么？我不是一个真正的js人，但调查它应该足够简单，但我张贴，以了解人们在我工作期间必须提供什么样的解决方案。

Answer 1

您可以使用.hide()

$('#id').hide();

$('table').hide(); // Hides all the tables

$('#identifier-0').show() // Shows the table wit id="identifier-0"