Question

我有一组表单字段（通过wtforms生成）我真的只需要显示一个，然后有一个添加按钮：

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

显示隐藏表单元素Jquery / Bootstrap

1 个答案: