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>

它生成类似的内容（在输入时设置值为3，其中包含id＆＃39; numoftables＆＃39;）：

但我想制作动态元素（动态ID＆＃39; s），请看：

红色框将具有动态数字，1到N; N是带有id＆＃39; numoftables＆＃39;。

的输入值

绿色框表示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中替换它。

jQuery动态函数与变量参数

1 个答案: