Agregar filas (tr) dinámicamente con JQuery

A veces queremos lograr un ambiente mas iteractivo entre el usuario y el sistema que esta usando, especialmente para el campo del desarrollo de paginas web; existen varias herramientas hoy en día para lograr estos efectos visuales que lograron cierta aceptación en el amplio mundo de los programadores. Lo beneficioso de estas herramientas es que en su mayoría son de libre uso (código libre) me refiero a JavaScript, JQuery, Ajax, JSon entre otros.

Para poder agregar filas a una tabla de manera dinámica deberemos primero crear el código html de la tabla y colocarle un identificador para reconocer que es aquella a quién vamos a comenzar agregar.

Código de la Tabla:

<table border="1" cellspacing="1" style="width: 100%; background-color: #FFFFFF; border-color: #000000;display:none;" id="ListMain">
  <thead>
    <tr>
      <th style="width: 10%;">C&Oacute;DIGO</th>
      <th style="width: 50%;">DESCRIPCI&Oacute;N</th>
      <th style="width: 10%;">CANTIDAD</th>
      <th style="width: 10%;">PRECIO</th>
      <th style="width: 10%;">DESCUENTO</th>
      <th style="width: 10%;">IMPORTE</th>
      <th style="width: 5px;"></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

No olvidemos que el identificador de la tabla se llama ListMain

 A continuación creamos una función llamada agregarElemento:

 function agregarElemento(){
    var code_part        = $("#code_part").val();
    var reference_part   = $("#reference_part").val();
    var description_part = $("#description_part").val();
    var quantity         = $("#quantity").val();
    var price            = $("#price").val();
    var descount         = $("#descount").val();
    if(code_part.length==0){
        alert("Debe seleccionar un repuesto");
        $("#CapaModeracion").dialog("close");   
        $("#sr").remove();
        $("#code_part").focus();
        return false;
    }
    if(reference_part.length==0){
        alert("Debe seleccionar un repuesto");
        $("#CapaModeracion").dialog("close");     
        $("#sr").remove();
        $("#reference_part").focus();
        return false;
    }
    if(description_part.length==0){
        alert("Debe seleccionar un repuesto");
        $("#CapaModeracion").dialog("close");   
        $("#sr").remove();  
        $("#description_part").focus();
        return false;
    }
    if(quantity.length==0 || quantity==0){
        alert("Debe ingresar un valor mayor a cero o diferente de vacio");
        $("#CapaModeracion").dialog("close");    
        $("#sr").remove(); 
        $("#quantity").focus();
        return false;
    }
    if(price.length==0 || price==0){
        alert("Debe ingresar un valor mayor a cero o diferente de vacio");
        $("#CapaModeracion").dialog("close");   
        $("#sr").remove();  
        $("#price").focus();
        return false;
    }
    if(descount.length==0){
        alert("No debe estar vacio");
        $("#CapaModeracion").dialog("close");   
        $("#sr").remove();  
        $("#descount").focus();
        return false;
    }
    nDest = nDest + 1;
    nDestC = nDestC + 1;
    var myTable     = document.getElementById('ListMain').insertRow(nDest);
    var cell1 = myTable.insertCell(0);
    var cell2 = myTable.insertCell(1);
    var cell3 = myTable.insertCell(2);
    var cell4 = myTable.insertCell(3);
    var cell5 = myTable.insertCell(4);
    var cell6 = myTable.insertCell(5);
    var cell7 = myTable.insertCell(6);
    cell1.innerHTML = "<input type='hidden' name='0formD" + nDestC + "_fk_cod_part' value='" + code_part + "'>" + reference_part;
    cell2.innerHTML = "<input type='hidden' name='0formD" + nDestC + "_fk_cod_attention' value='1'>" + description_part;
    cell3.innerHTML = "<input type='hidden' name='0formD" + nDestC + "_price_unit' value='" + price + "'>" + quantity;
    cell4.innerHTML = "<input type='hidden' name='0formD" + nDestC + "_quantity' value='" + quantity + "'>" + price;
    cell5.innerHTML = "<input type='hidden' id='0formD" + nDestC + "_amount' name='0formD" + nDestC + "_amount' value='" + parseFloat( price * quantity - descount ) + "'>" + descount;
    cell6.innerHTML = "<input type='hidden' id='0formD" + nDestC + "_descount' name='0formD" + nDestC + "_descount' value='" + descount + "'>" + parseFloat( price * quantity - descount ).toFixed(2);
    cell7.innerHTML = "<img src='images/icon/del_item.png' onclick='delItem(" + nDestC + ");' style='cursor:pointer' title='QUITAR ITEM'/>";
    $('#CountAttention').val(nDestC);
    var cssString = 'text-align:center;font-weight:normal;font-size:10px;';
    myTable.style.cssText = cssString;
    myTable.setAttribute('style',cssString);
    $("#CapaModeracion").dialog("close");   
    $("#sr").remove();  
    $("#ListMain").css({"display":"block","width":"100%"});
    $("#ResultMain").css({"display":"block","width":"100%"});
    calculateTotal();
    cleanItem();
    Tab('reference_part');
}

 Recordemos que esto para poder ser llamado necesitamos de un evento y a continuación el siguiente codigo que traerá todo a funcionar correctamente:

 <fieldset>
   <legend align= "center" style="width: 100%;text-align: left;color: #999;">REPUESTO :::...</legend>
   <table border="0" cellspacing="1" style="width: 100%;padding: 2px;">
      <tr style="font-size: 10px;text-align: center;">
           <th style="width: 10%;">- C&Oacute;DIGO -</th>
           <th style="width: 50%;">- DESCRIPCI&Oacute;N -</th>
           <th style="width: 10%;">- CANTIDAD -</th>
           <th style="width: 10%;">- PRECIO -</th>
           <th style="width: 10%;">- MEDIDA -</th>
           <th style="width: 10%;">- DSCTO -</th>
           <th style="width: 5px;"></th>
      </tr>
      <tr style="text-align: center;">
      <td><input type="text" id="code_part" style="width: 96%;text-align: center;"/><input type="text" id="reference_part" style="width: 96%;text-align: center;"/></td>
          <td><input type="text" id="description_part" style="width: 99%;"/></td>
    <td><input type="text" id="quantity"  style="width: 96%;text-align: center;" value="0" /></td>
    <td><input type="text" id="price" style="width: 96%;text-align: center;" value="0.00" /></td>
          <td>
     <select id="measure" name="measure" style="width: 100%;" disabled="disabled">
                  <option value="">---</option>
                  <option value="1">Unidad</option>
               </select>
          </td>
   <td><input type="text" id="descount" style="width: 96%;text-align: center;" value="0.00" onkeypress="return SoloDecimal(event, this)" onblur="confirmAddItem();"/></td>
      <td><img src="images/icon/add_item.png" width="16px" title="AGREGAR ITEM" style="cursor: pointer;" onclick="confirmAddItem();"/></td>
      </tr>
     </table>
</fieldset>

 Imágenes 
Para agregar 
Para eliminar 

Espero haya sido de su agrada, cualquier consulta dejen sus comentarios, si no funciona el código pueden escribir opiniones y no se olviden recomendar esta entrada ya sea por facebook u otro medio social... Gracias
El mercado de divisas (también conocido como Forex, abreviatura del término inglés Foreign Exchange) es un mercado mundial y descentralizado en el que se negocian divisas. Este mercado nació con el objetivo de facilitar el flujo monetario que se deriva del comercio internacional. El volumen diario de transacciones que lleva a mover alrededor de 4 trillones de dólares estadounidenses (USD)1 al día ha crecido tanto que, en la actualidad, el total de operaciones en moneda extranjera que se debe a operaciones internacionales de bienes y servicios representan un porcentaje casi residual, debiéndose la mayoría de las mismas a compraventa de activos financieros.2 En consecuencia este mercado es bastante independiente de las operaciones comerciales reales y las variaciones entre el precio de dos monedas no puede explicarse de forma exclusiva por las variaciones de los flujos comerciales. El oro ha sido dinero por 5,000 años y jamás ha dejado de serlo. En la actualidad, en la Tierra sólo hay suficiente oro para que cada persona tenga 1/3 de onza. En el transcurso del tiempo y en la historia de la humanidad, el oro se ha revalorizado para valer más que todas las monedas en exceso en la circulación. Hoy en día, para respaldar todos los dólares de los EE.UU. impresos por la Reserva Federal, el oro tendría que ser revaluado a 15.000 dólares por onza. En tiempos de crisis, el oro es la inversión más segura y también tiene el mayor potencial para aumentar su riqueza. El oro es una inversión totalmente privada y anónima que es también muy fácil de transportar. ¿Por qué comprar Plata? En la actualidad, en la Tierra hay menos plata de grado de inversión disponible para los inversionistas, que de oro. En la actualidad, sólo hay suficiente plata en la Tierra de grado de inversión para que cada persona tenga 1/14 de onza. La plata es el 'metal milagroso'. Sólo es superado por el petróleo como la materia prima más útil del mundo. Además de ser dinero, la plata tiene miles de usos esenciales en la industria. La plata es el mejor conductor eléctrico, el que mejor resiste a las temperaturas y el metal que mejor refleja en el planeta, que no tiene sustitutos conocidos. Durante los últimos 30 años el mundo ha consumido más plata que la que ha sido extraída. Los inventarios de hoy en día están cerca de los niveles más bajos de todos los tiempos.