使用輸入類型編號和onchange事件的動態表格

Question

我在圖片上有表格，我希望「numero de cuartos」字段可以添加「numero de personas adultas」和「numero deniños」的相同數量的輸入。另外，「numero deniños」輸入需要附加相同數量的「edad deniños」輸入。

我有這樣的：

<!--INPUT TYPE NUMBER OF Numero de cuartos--> 
 
<div class="col-md-6 col-sm-6"> 
 
    <div class="form-group"> 
 
    <label>Numero de cuartos</label> 
 
    <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0"/> 
 
</div> 
 
</div> 
 

 
<!--Place to append--> 
 
<div id="contenidoPersonas"> 
 
</div> 
 

 
<!-- This form is appended depending on the number of "numero de cuartos" input --> 
 
<div id="rooms" style="display:none;"> 
 
           <div class="row"> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <div class="form-group"> 
 
              <label>Numero de personas adultas</label> 
 
              <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6"/> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <div class="form-group"> 
 
              <label>Numero de niños</label> 
 
              <input required type="number" id="nino" name="nino[]" class="form-control" min="0" max="6" onchange="insertarEdadesNinos();"/> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <!-- Inside edadNinos div goes the div with id "ninos"--> 
 
             <div id="edadNinos"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
           
 
<!-- This form is appended on the "edadNinos" div depending on the number of "numero de niños" input --> 
 
           <div id="ninos" style="display:none;"> 
 
            <div class="form-group"> 
 
             <label>Edad de niños</label> 
 
            <input required type="number" id="edadNino" name="edadNino[]" class="form-control" min="0" max="12"/> 
 
            </div> 
 
           </div>

的JavaScript：

function insertarCampos(){ 
      var personasSingle = $('#cuartos').val(); 

      for(i = 0;i < personasSingle;i++){ 
       $('#contenidoPersonas').append($('#rooms').html()); 
       $('#contenidoPersonas').append("<hr>"); 
      } 
     } 

     function insertarEdadesNinos(){ 
      var numNinos = $('#nino').val(); 
      $('#edadNinos').empty(); 
      for(i = 0;i < numNinos;i++){ 
       $('#edadNinos').append($('#ninos').html()); 
      } 
     } 

這正確追加的事情，比如在圖片，但有som E麻煩：

• 如果我改變了主意，而不是「2」，我把1，輸入被刪除，再次追加，因爲空函數的，我不知道該如何糾正。

• 另一件事是，「numero deniños」輸入僅適用於第一個，第二個「numero deniños」輸入沒有做任何事情，因爲它與第一個ID具有相同的ID，我不喜歡也不知道如何糾正這一點。

我還需要發送分離PHP腳本的輸入，分離視覺標記的圖片與標籤

<hr> 

感謝形式！

Answer 1

你想要做的是模擬模板如何工作，但不是一個好主意，只是使用已經在文檔中的DOM元素的HTML（也許你可以使用replace來改變HTML，但這將是一個非常討厭的解決方案），我建議你看看jQuery模板如何工作http://jsfiddle.net/zarjay/ZAkM7/在此期間，這段代碼將做你正在努力實現的：

（你還需要添加引用jQuery模板插件）http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js）

<!--INPUT TYPE NUMBER OF Numero de cuartos--> 
<div class="col-md-6 col-sm-6"> 
    <div class="form-group"> 
     <label> 
      Numero de cuartos 
     </label> 
     <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0" /> 
    </div> 
</div> 
<br /> 
<!--Place to append--> 
<div id="contenidoPersonas"> 
</div> 
<!-- This form is appended depending on the number of "numero de cuartos" input --> 
<script id="roomsTemplate" type="x/jquery-tmpl"> 
    <div class="room" room-number="${roomNumber}"> 
     <div class="row"> 
      <div class="col-md-4 col-sm-4"> 
       <div class="form-group"> 
        <label> 
         Numero de personas adultas 
        </label> 
        <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6" /> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4"> 
       <div class="form-group"> 
        <label> 
         Numero de ni�os 
        </label> 
        <input required type="number" name="nino[]" class="nino form-control" min="0" max="6" onchange="insertarEdadesNinos(${roomNumber});" /> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4"> 
       <!-- Inside edadNinos div goes the div with id "ninos"--> 
       <div class="edadNinos"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <hr room-number="${roomNumber}" /> 
</script> 
<!-- This form is appended on the "edadNinos" div depending on the number of "numero de ni�os" input --> 
<script id="ninosTemplate" type="x/jquery-tmpl"> 
    <div class="ninos" nino-number="${ninoNumber}"> 
     <div class="form-group"> 
      <label> 
       Edad de ni�os 
      </label> 
      <input required type="number" class="edadNino" name="edadNino[]" class="form-control" min="0" max="12" /> 
     </div> 
    </div> 
</script> 

的JavaScript：

function insertarCampos() { 
     var personasSingle = $('#cuartos').val(); 
     var currentRooms = $('#contenidoPersonas .room').length; 

     if(personasSingle > currentRooms) { 
      for (var i = currentRooms; i < personasSingle; i++) { 
       $('#roomsTemplate').tmpl({ roomNumber: i }).appendTo('#contenidoPersonas'); 
      } 
     } 
     else { 
      for (var i = currentRooms; i > personasSingle; i--) { 
       $('[room-number="'+(i - 1)+'"]').remove(); 
      } 
     } 
    } 

    function insertarEdadesNinos(roomNumber) { 
     var numNinos = $('.room[room-number="'+roomNumber+'"] .nino').val(); 
     var currentNinos = $('.room[room-number="'+roomNumber+'"] .edadNino').length; 

     if(numNinos > currentNinos) { 
      for (i = currentNinos; i < numNinos; i++) { 
       $('#ninosTemplate').tmpl({ ninoNumber: i }).appendTo('.room[room-number="'+roomNumber+'"] .edadNinos'); 
      } 
     } 
     else { 
      for (var i = currentNinos; i > numNinos; i--) { 
       $('[room-number="'+ roomNumber +'"] [nino-number="'+(i - 1)+'"]').remove(); 
      } 
     } 
    } 

另外，這個問題有點過時了，你也可以看看一些MVC框架，如http://knockoutjs.com這不是很複雜。

Answer 2

好的，這個腳本中有一些問題。

第一張：ID是獨一無二的！

id全局屬性定義了一個唯一的標識符（ID），它在整個文檔中必須是唯一的。

您可以對要複製/克隆的元素使用類。爲了選擇這些元素，JQuery有這些精彩的Class Selectors。

或者你可以改變這些元素的Id：

$('#rooms').clone().attr('id', 'rooms' + myIndex) 

如果複製追加元素融入DOM，你要保存這些元素的引用，使您能夠remove後來他們。這可以通過將它們放入一個array：

var rooms = new Array(); 
.... 
for(....) { 
    var ref = $('#rooms').clone().attr('id', 'rooms' + myIndex); 
    rooms.push(ref); 
} 

或者你的工作與生成的ID和ID-Selector ...您的選擇。

要選擇其中一個克隆樹中的「Numero deniños」輸入字段，可以使用JQuery Child Selector。在參考資料上，您可以註冊change event handler。在那裏你可以註冊一個函數，每次輸入字段被改變時都會調用它。