顯示隱藏的表單元素的Jquery /引導

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"