Fügen Sie eine neue Zeile zu einer HTML-Tabelle hinzu, wenn die vorherige/aktuelle gefüllt

Question

Ich bin kurz in der Zeit und werde versuchen, kurz zu sein, wenn es ein Problem mit meiner Erklärung Ich werde versuchen, in der Nacht zu bearbeiten.

Einfach, ich habe eine Tabelle, Name und Alter, es beginnt, wenn die Seite mit einer Zeile geladen wird. Wenn die erste mit etwas gefüllt ist, das nicht Null ist, wird automatisch eine andere Zeile leer geladen.

Ich bevorzuge JavaScript, aber ich könnte auch mit asp.net verwalten. Ich hoffe, ich habe mich gut erklärt und entschuldige mich dafür, dass ich so kurz bin.

Jede Hilfe wäre willkommen.

Edit: Code

<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-Code

<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

Ohne Beispiele, ich habe mein Bestes versucht zu decken, was ich denke, Sie meinen, bitte meine Beispiele siehe unten ...

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(); 
    } 
    }); 
});