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

Question

I'm short in time and will try to be brief, if there is a problem with my explanation I'll try to edit at night.

Simply, I have a table, Name and Age, it starts when the page loads with one row. When the first one is filled with something that is not null, automatically another row loads empty.

I prefer using JavaScript but I could also manage with asp.net. I hope I explained myself well and sorry for being so brief.

Any help would be appreciated.

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>

Have you looked at jquery? [here](http://stackoverflow.com/questions/463506/how-do-i-get-the-value-of-a-textbox-using-jquery) [here](http://stackoverflow.com/questions/10619445/the-prefered-way-of-creating-a-new-element-with-jquery) [here](http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery) [here](http://stackoverflow.com/questions/1481152/how-to-detect-a-textboxs-content-has-changed) even just [looking](http://stackoverflow.com/questions/171027/add-table-row-in-jquery?rq=1) at the "related questions" on the right side. — the_lotus, Apr 11 '16 at 12:11
Yes I did, but all are related to buttons. What I want is when the line is filled to create a new one — Alejandro A, Apr 12 '16 at 07:43

score 0 · Answer 1 · answered Apr 11 '16 at 12:53

0

With no examples, I've tried my best to cover what I think you mean, please see my examples below...

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

answered Apr 11 '16 at 12:53

LMS94

1,016
1
7
14

Alright thanks for your first answer, the code is the following (using asp.net) – Alejandro A Apr 12 '16 at 07:39
Ah sorry, I don't know ASP. I hope my answer can shed some light on an answer in ASP. – LMS94 Apr 12 '16 at 07:55
Regardless your answer didn't work in jsfiddle... Damn struggling – Alejandro A Apr 12 '16 at 09:12
Hi, you'd need to include the jquery library for it to work, see my jsfiddle here: https://jsfiddle.net/cpvb492m/ – LMS94 Apr 12 '16 at 09:24
You were right it worked, the only thing I don't understand is the data-raw-prototype structure of the command, what is evertyhing you wrote in there. If you can explain it I will give another try. – Alejandro A Apr 12 '16 at 10:53
The prototype is basically the table template, its a html encoded string of ", this allows the developer to supply a "template" for the table & then jquery will simply append the html into the table when required. – LMS94 Apr 12 '16 at 10:58
I'm no ASP developer, so dont quote me on this, but you could do something like Server.HTMLEncode('...') to make the template more readable. – LMS94 Apr 12 '16 at 11:04
I will look into it, but just tried to use your code on my current project posted previously and its not working, I don't know why. I edited now with the table on html – Alejandro A Apr 12 '16 at 11:09
Please make sure you include "" in your web page. – LMS94 Apr 12 '16 at 11:13
Already had those No error returned by chrome console, simply doesnt work. Maybe because of the data-row-prototype? If you have time see the last HTML code I posted, please. – Alejandro A Apr 12 '16 at 11:14
As previously mentioned, I'm not an ASP developer so I've converted the asp inputs to plain html, please see my updated jsfiddle example: https://jsfiddle.net/qf6mxkwa/ – LMS94 Apr 12 '16 at 11:35
Hello and once again thanks for your help. I looked for an online HTML encoder and generated the code. Also, by using windows.alerts I see that it enters the first function AppendRow and executes. It also detects when an input is changed inside the form (tested with window alert) And it also executes the if (valid), but it doesn' seem to add the row. Feels like Im getting close thanks for your help. – Alejandro A Apr 12 '16 at 11:37
If there's any errors, they should appear in your console log – LMS94 Apr 12 '16 at 11:38
And today the exact same code is giving me this error 'Uncaught TypeError: Cannot read property 'replace' of undefined http://localhost:50480/FormDemo/css/cookies.css Failed to load resource: the server responded with a status of 404 (Not Found)' refering to this line var content = table.data('row-prototype').replace(/__id__/g, rowCount); – Alejandro A Apr 13 '16 at 07:15
That would happen if the ID of the table has been changed, or the data-prototype-row doesn't exist in the table. Please make sure ASP is outputting the table exactly as is in the js fiddle. – LMS94 Apr 13 '16 at 07:56
Hello I created a window.alert(table) which returns [object Object]. When I try to log window.alert(table.data('row-prototype')) returns as udnefined. I legit copied the same code from to
of the js fiddle and still returns unedefined when trying to see table.data('row-prototype'). Thank you – Alejandro A Apr 13 '16 at 08:04
UPDATE : Managed to get the first part to work moving the – Alejandro A Apr 13 '16 at 08:32
UPDATE : Changed de form id =myform to < div > tag because ASP internal problems and its working now, thank you so much LMS94 – Alejandro A Apr 13 '16 at 08:33

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

1 Answers1