填充上一个/当前时向 HTML 表添加新行

Question

我时间紧迫，会尽量简短，如果我的解释有问题，我会在晚上尝试编辑。

简单地说，我有一个表格，名称和年龄，它在页面加载一行时开始。当第一个填充不为空的内容时，另一行会自动加载为空。

我更喜欢使用 JavaScript，但我也可以使用 asp.net 进行管理。 我希望我能很好地解释自己，抱歉这么简短。

任何帮助将不胜感激。

编辑：代码

<table class="table table-striped" style="margin:10px" id="tablaSKU" runat="server">
                          <thead>
                              <tr>
                                <th></th>
                                <th>SKU</th>
                                <th>Precio €</th>
                                <th>Descripción</th>
                                <th>Fecha Inicio Demo</th>
                                <th>Fecha Fin Demo</th>
                                <th>Tipo de préstamo</th>
                              </tr>
                          </thead>
                            <tbody>
                              <tr>
                                <th>1-</th>
                                <th class="col-sm-2" name="sku"><asp:TextBox ID="sku" runat="server" class="form-control"></asp:TextBox></th>
                                <th class="col-sm-1"><asp:TextBox ID="precio" runat="server" class="form-control"></asp:TextBox></th>
                                <th class="col-sm-3"><asp:TextBox ID="descripProd" runat="server" class="form-control"></asp:TextBox></th>
                                <th class="col-sm-2"><asp:TextBox ID="dataInit" runat="server" class="form-control"></asp:TextBox></th>
                                <th class="col-sm-2"><asp:TextBox ID="dataFin" runat="server" class="form-control"></asp:TextBox></th>
                                <th class="col-sm-2"> 
                                    <asp:DropDownList ID="opcion" runat="server" CssClass="formularioChekLst form-control">
                                        <asp:ListItem>Opciones : </asp:ListItem>
                                        <asp:ListItem>Opción 1</asp:ListItem>
                                        <asp:ListItem>Opción 2</asp:ListItem>
                                        <asp:ListItem>Opcion 3</asp:ListItem>
                                    </asp:DropDownList>
                                </th>
                              </tr>

                            </tbody>
                          </table>

HTML 代码

<table class="table table-striped" style="margin:10px" id="tablaSKU" runat="server">
                      <thead>
                          <tr>
                            <th></th>
                            <th>SKU</th>
                            <th>Precio €</th>
                            <th>Descripción</th>
                            <th>Fecha Inicio Demo</th>
                            <th>Fecha Fin Demo</th>
                            <th>Tipo de préstamo</th>
                          </tr>
                      </thead>
                        <tbody>
                          <tr>
                            <th>1-</th>
                            <th class="col-sm-2"><input ID="sku" runat="server" class="form-control"></input></th>
                            <th class="col-sm-1"><input ID="precio" runat="server" class="form-control"></input></th>
                            <th class="col-sm-3"><input ID="descripProd" runat="server" class="form-control"></input></th>
                            <th class="col-sm-2"><input ID="dataInit" runat="server" class="form-control"></input></th>
                            <th class="col-sm-2"><input ID="dataFin" runat="server" class="form-control"></input></th>
                            <th class="col-sm-2"> 
                                <asp:DropDownList ID="opcion" runat="server" CssClass="formularioChekLst form-control">
                                    <asp:ListItem>Opciones : </asp:ListItem>
                                    <asp:ListItem>Opción 1</asp:ListItem>
                                    <asp:ListItem>Opción 2</asp:ListItem>
                                    <asp:ListItem>Opcion 3</asp:ListItem>
                                </asp:DropDownList>
                            </th>
                          </tr>


                        </tbody>
                      </table>

Answer 1

没有示例，我已尽力涵盖我认为您的意思，请参阅下面的示例...

HMTL：

<form id=myform>
    <table id="mytable" data-row-prototype="&lt;tr&gt; &lt;td&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name[]&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Age:&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;number&quot; name=&quot;age[]&quot;&gt;&lt;/td&gt; &lt;/tr&gt;">
    </table>
</form>

jQuery:

var table = $('#mytable');

function appendRow() {
  table.append(table.data('row-prototype'));
}

$(function() {
  appendRow(); // Append the first row on page load

  $('form#myform').on('change', function () {
    var inputs = $(this).find(':input'),
        valid = true;
    $.each(inputs, function () {
        if ($(this).val() == '') {
        valid = false;
      }
    });

    if (valid) {
        appendRow();
    }
  });
});