hola a todos espero me puedan ayudar,, tengo el siguiente problema..el siguiente codigo funciona perfectamente. al rellenar el formulario y darle agregar, se muestra la fila insertada en la segunda tabla,.. y puedo eliminar registro por registro...
pero resulta que necesito lo siguiente.. como la tabla 1 donde se rellenan los input sera dinamica. con datos de la base de datos. necesito añadir el boton (AGREGAR) en cada una de las filas, y que al darle clik me añada ese registro a la segunda tabla, espero me comprendan,
este es el codigo.:
Código HTML:
Ver original<meta http-equiv="Pragma"content="no-cache"> <meta http-equiv="expires"content="0">
<script type="text/javascript"> $(document).ready(function(){
});
function agregarFila(obj){
$("#cant_campos").val(parseInt($("#cant_campos").val()) + 1);
var oId = $("#cant_campos").val();
var v1 = $("#1").val();
var v2 = $("#2").val();
var v3 = $("#3").val();
var v4 = $("#4").val();
var v5 = $("#5").val();
var v6 = $("#6").val();
var v7 = $("#7").val();
var v8 = $("#8").val();
var v9 = $("#9").val();
var v10 = $("#10").val();
var strHtml1 = '
<td><img src="images/delete.png" widtd="16" height="16" alt="Eliminar" onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){eliminarFila(' + oId + ');}"/>';
strHtml1 += '
<input type="hidden" id="hdnIdCampos_' + oId +'" name="hdnIdCampos[]" value="' + oId + '" /></td>';
strHtml1 += '
<input type="hidden" id="hdnIdCampos_' + oId +'" name="hdnIdCampos[]" value="' + oId + '" /></td>';
var strHtml2 = "
<td>" + v1 + '
<input type="hidden" id="hdnEdad_' + oId + '" name="hdnEdad_' + oId + '" value="' + v1 + '"/></td>' ;
var strHtml3 = "
<td>" + v2 + '
<input type="hidden" id="hdnDireccion_' + oId + '" name="hdnDireccion_' + oId + '" value="' + v2 + '"/></td>' ;
var strHtml4 = "
<td>" + v3 + '
<input type="hidden" id="hdnSexo_' + oId + '" name="hdnSexo_' + oId + '" value="' + v3 + '"/></td>' ;
var strHtml5 = "
<td>" + v4 + '
<input type="hidden" id="hdnEstCivil_' + oId + '" name="hdnEstCivil_' + oId + '" value="' + v4 + '"/></td>' ;
var strHtml7 = "
<td>"+v5+'
</td>';
var strHtml8 = "
<td>"+v6+'
</td>';
var strHtml9 = "
<td>"+v7+'
</td>';
var strHtml10 = "
<td>"+v8+'
</td>';
var strHtml11 = "
<td>"+v9+'
</td>';
var strHtml12 = "
<td>"+v10+'
</td>';
var strHtmlTr = "
<tr id='rowDetalle_" + oId + "'></tr>";
var strHtmlFinal = strHtml1 + strHtml2 + strHtml3 + strHtml4 + strHtml5 +strHtml7+strHtml8+strHtml9+strHtml10+strHtml11+strHtml12;
//tambien se puede agregar todo el HTML de una sola vez.
//var strHtmlTr = "
<tr id='rowDetalle_" + oId + "'>" + strHtml1 + strHtml2 + strHtml3 + strHtml4 + strHtml5 + strHtml6 +"
</tr>";
$("#tbDetalle").append(strHtmlTr);
//si se agrega el HTML de una sola vez se debe comentar la linea siguiente.
$("#rowDetalle_" + oId).html(strHtmlFinal);
return false;
}
function eliminarFila(oId){
$("#rowDetalle_" + oId).remove();
return false;
}
function cancelar(){
$("#tbDetalle").html("");
return false;
}
<form name="proyecto" id="proyecto" action="" metdod="post"> <input type="reset" id="btnCancel" name="btnCancel" value="Cancelar" class="buttons_CANCEL" onClick="cancelar();" /> <input type="button" id="btnAgregar" name="btnAgregar" value="Guardar" class="buttons_OK" onClick="alert('Aqui debes implementar el guardado de datos!');" />
<table width="689" border="0"> <td><div class="scrolled"> <table widtd="100%" border="1" bordercolor="#999999" cellspacing="0" > <tdead>
<td bgcolor="#E4E4E4">Accion
</td> <td bgcolor="#E4E4E4">Tipo
</td> <td bgcolor="#E4E4E4">Nombre
</td> <td bgcolor="#E4E4E4">Inicio del Curso o Taller
</td> <td bgcolor="#E4E4E4">Culminacion del Curso o Taller
</td> <td bgcolor="#E4E4E4">Hora
</td> <td bgcolor="#E4E4E4">Total de Hora
</td> <td bgcolor="#E4E4E4">Modalidad
</td> <td bgcolor="#E4E4E4">Monto de Inscripcion
</td> <td bgcolor="#E4E4E4">Mensualidad
</td> <td bgcolor="#E4E4E4">Monto Total
</td> <td ><input type="hidden" id="num_campos" name="num_campos" value="0" /> <input type="hidden" id="cant_campos" name="cant_campos" value="0" /> <input type="button" id="btnAgregar" name="btnAgregar" value="Agregar Persona" class="buttons_aplicar" onClick="agregarFila(document.getElementById('cant_campos'));" /></td> <td ><input type="text" id="1" name="1" value="" /></td> <td><input type="text" id="2" name="2" value="" /></td> <td><input type="text" id="3" name="3" value="" /></td> <td ><input type="text" id="4" name="4" value="" /></td> <td ><input type="text" id="5" name="5" value="" /></td> <td ><input type="text" id="6" name="6" value="" /></td> <td ><input type="text" id="7" name="7" value="" /></td> <td><input type="text" id="8" name="8" value="" /></td> <td ><input type="text" id="9" name="9" value="" /></td> <td><input type="text" id="10" name="10" value="" /></td> </tdead>
<table widtd="468" border="0" background="botones/fonod.jpg" class="cir2">
<td height="29" align="center" bgcolor="#E4E4E4" >Cursos y Talleres Seleccionados
</td> <table widtd="100%" border="1" bordercolor="#999999" cellspacing="0" > <tdead>
<td bgcolor="#E4E4E4">Accion
</td> <td bgcolor="#E4E4E4">Tipo
</td> <td bgcolor="#E4E4E4">Nombre
</td> <td bgcolor="#E4E4E4">Inicio del Curso o Taller
</td> <td bgcolor="#E4E4E4">Culminacion del Curso o Taller
</td> <td bgcolor="#E4E4E4">Hora
</td> <td bgcolor="#E4E4E4">Total de Hora
</td> <td bgcolor="#E4E4E4">Modalidad
</td> <td bgcolor="#E4E4E4">Monto de Inscripcion
</td> <td bgcolor="#E4E4E4">Mensualidad
</td> <td bgcolor="#E4E4E4">Monto Total
</td> </tdead>