Добавить новую строку в таблицу HTML, когда заполнен предыдущий/текущий

Question

У меня короткое время и постараюсь быть кратким, если есть проблема с моим объяснением, я попытаюсь отредактировать по ночам.

Просто у меня есть стол, имя и возраст, он начинается, когда страница загружается одной строкой. Когда первый заполняется чем-то ненулевым, автоматически другая строка загружается пустым.

Я предпочитаю использовать JavaScript, но я также мог бы управлять с asp.net. Надеюсь, я хорошо себя объяснил и жалею, что так краток.

Любая помощь будет оценена по достоинству.

Edit: Код

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