当上一行/当前行被填充时，将新行添加到HTML表中

Add a new row to an HTML table when the previous/current is filled

本文关键字：表中 新行 添加 HTML 一行 填充      更新时间：2024-04-30

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

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

我更喜欢使用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>

由于没有示例，我已经尽力解释了我认为你的意思，请参阅下面的示例。。。

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();
    }
  });
});
相关文章：