jQuery的具有可變PARAMS

Question

動態功能

我試圖使使用產生（動態地）表一個小程序，我將說明一個例子：

我有一個空白頁只和輸入（數型）和一個div：

<input id='numoftables' type='number'> 
<div id='tablescontainer'></div> 

我需要創建一個具有以下結構ñ表：

<table> 
    <tr> 
     <td> 
      <div style='text-align:left;'> 
       <h3> 
        <span class='label label-default'>Table #N</span> 
       </h3> 
      </div> 
     </td> 
     <td> 
      <input id='secondNum' type='number' class='form-control input-md' value='1'> 
     </td> 
    </tr> 
</table> 
<div class='table-responsive text-left'> 
    <table id='tableN' class='table table-striped condensed'> 
     <thead> 
      <tr> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
       <th>Col 4</th> 
       <th>Col 5</th> 
       <th>Col 6</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align='middle'> 
        <b>M</b> 
       </td> 
       <td> 
        <input type='number' class='form-control input-md'> 
       </td> 
       <td> 
        <input type='number' class='form-control input-md'> 
       </td> 
       <td> 
        <input type='number' class='form-control input-md'> 
       </td> 
       <td> 
        <div class='input-group date' id='fecha'> 
         <input id='fechainput' maxlength='10' data-date-format='DD/MM/YYYY' type='date' class='form-control' placeholder='Fecha DD/MM/AAAA' required> 
         <span class='input-group-addon'> 
          <span class='glyphicon glyphicon-calendar'></span> 
         </span> 
        </div> 
       </td> 
       <td align='middle'> 
        <img class='delete' src='img/delete.png' > 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<hr> 

這是產生類似的這種事情（與ID輸入設定值3「numoftab LES'）：

但我想使動態元素（動態ID的），請看到這一點：

紅盒子將有動態的數字，1到N ; N是ID爲'numoftables'的輸入的值。

綠框代表tableN的行數（我稱這個數字，M）。 ？

我怎麼能生成所有的這種動態:(

我有一個瘋狂的代碼，如：

$("#tablescontainer").html(null); 
for (i=1;i<=$("#numoftable").val();i++) 
{ 
    $("#tablescontainer").append("<table><tr><td><div style='text-align:left;'><h3><span class='label label-default'>Table #N</span></h3></div></td><td style='position:relative;top:7px !important;left:8px;'><input id='secondNum' type='number' style='width:64px;' class='form-control input-md' value='1'></td></tr></table><div class='table-responsive text-left'><table id='tableN' class='table table-striped condensed'><thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th><th>Col 6</th></tr></thead><tbody><tr><td align='middle'><b>M</b></td><td><input type='number' class='form-control input-md'></td><td><input type='number' class='form-control input-md'></td><td><input type='number' class='form-control input-md'></td><td><div class='input-group date' id='fecha'><input id='fechainput' maxlength='10' data-date-format='DD/MM/YYYY' type='date' class='form-control' placeholder='Fecha DD/MM/AAAA' required><span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span></div></td><td align='middle'><img width='20' class='delete' src='img/delete.png' ></td></tr></tbody></table></div><hr><script>$('#numcarr"+i+"').click(function(e){$('#tabla"+i+" > tbody:last').html(null);for (j=1;j<=$(\"#numcarr"+i+"\").val();j++){$('#tabla"+i+" > tbody:last').append('<tr><td align=\"middle\"><b>"+i+"</b></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><div class=\"input-group date\" id=\"fecha\"><input id=\"fechainput\" maxlength=\"10\" data-date-format=\"DD/MM/YYYY\" type=\"date\" class=\"form-control\" placeholder=\"Fecha DD/MM/AAAA\" required><span class=\"input-group-addon\"><span class=\"glyphicon glyphicon-calendar\"></span></span></div></td><td align=\"middle\"><img width=\"20\" class=\"delete\" onclick=\"$(this).parent().parent().remove()\" src=\"img/delete.png\"></td></tr>')}});</script>"); 
} 

我不知道我怎麼能解決這個問題，寫更少的代碼，使其動態：C 感謝

Answer 1

看到的結果檢查表和secondNum：jsfiddle

jQuery的

$(function(){ 
    $("#numoftables").on("change", function(){ 
    $("#tablescontainer").html(""); 
    var num = $(this).val(); 
     var table = $("#copy").html(); 
    for (var i=1; i <= num; i++){ 
     var newTable = table.replace("secondNum", "id='secondNum"+i).replace("uniqueTable", "uniqueTable"+i); 
     $("#tablescontainer").append(newTable); 
    } 
    }); 
}); 

CSS

#copy{ 
    display: none; 
} 

現在你必須做其他事情在類似的方式，如顯示 的表號。使用different id，它可能不會在 內容中使用，並將其替換爲jquery。