0

我有一组表单字段（通过 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 人，但研究它应该很简单，但我正在发布以了解人们在我工作时必须提供哪些解决方案。

4

1 回答 1

2

您可以使用.hide() 

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

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

$('#identifier-0').show() // Shows the table wit id="identifier-0"
于 2012-10-17T16:54:19.403 回答