javascript - 具有可变参数的 jQuery 动态函数

Question

我正在尝试制作一个使用生成(动态)表的小程序，我将解释一个示例:

我有一个空白页，只有输入(数字类型)和一个 div:

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

我需要创建 N 个具有以下结构的表:

<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 为“numoftables”的输入上设置值 3):

但我想制作动态元素(带有动态 id)，请参阅:

红色框会有动态编号，1到N； N 是 id 为“numoftables”的输入的值。

绿色框代表表N的行数(我称这个数字为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

通过检查表和第二个数字来查看结果: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;
}

Now you have to do other things in the similar fashion, like showing the the table number. use a different id which may not use in the content and replace it in the jquery.