Add HTML input dynamically jQuery and asp.net

Question

I have this JavaScript code to create and add HTML dynamically in my asp.net webform:

var i = 0;
    function agregaCampos() {
        i++;
        var cantidad = '<td class="auto-style2"><input type="text" size="3" name="cantidad' + i + '" /></td>';
        var codigo = '<td class="auto-style3"><input type="text" size="5" name="codigo' + i + '" /></td>';
        var umedida = '<td class="auto-style4"><select class="dropdown1" name="umedida' + i + '"><option value="PIEZA">PIEZA</option></select></td>';
        var descripcion = '<td class="auto-style5"><input type="text" size="70" name="cantidad' + i + '" /></td>';
        var punitario = '<td class="auto-style6"><input type="text" size="12" name="punitario' + i + '" /></td>';
        var importe = '<td class="auto-style7"><input type="text" size="12" name="importe' + i + '" /></td>';
        $("#conceptos").append("<tr>");
        $("#conceptos").append(cantidad);
        $("#conceptos").append(codigo);
        $("#conceptos").append(umedida);
        $("#conceptos").append(descripcion);
        $("#conceptos").append(punitario);
        $("#conceptos").append(importe);
        $("#conceptos").append("</tr>");
    }

I want to add controls before this table close tag:

<div id="conceptos">
        <table class="factura">
            <tr>
                <th class="auto-style2">Cantidad</th>
                <th class="auto-style3">Código</th>
                <th class="auto-style4">U. de médida</th>
                <th class="auto-style5">Descripción</th>
                <th class="auto-style6">Precio Unitario</th>
                <th class="auto-style7">Importe</th>
            </tr>

                <----- Here

        </table>
    </div>

Any sugestion how to do it?

Answer 1

You are appending your code to the div called "conceptos". Instead you should be appending the code to the table. You can change your jQuery selector to $(".factura tr"). That will select all TRs from your table.

It's important to point out that if you have more than one table with the same class, the selector will apply to all of them. In this case you can attribute an ID to your table.

In order to get the second row (TR) of your table you can use the selector "eq" which selects an index.

So your code would be something like this.

   $(".factura tr:eq(1)").append(cantidad);
  ...

Also, as pointed out in the comments, your TR should be a DOM element and not an Open and Close tag.

You could first append to your TABLE a new TR and then change the index above to "2" instead of 1 in order to select the new TR to be appended.

I hope is helps.

Answer 2

You can use jQuery with following code

var tr="<tr>YOUR DATA WITH TDs</tr>";
$(".factura").append(tr);

This code will always add new data(tr) to existing table.