[SOLUCIONADO] Modificar Registros de Tabla HTML con Jquery o javascript sin plugins :S

pato_cuack · #1 (**permalink**) 21/06/2012, 10:10

Buenos días, estoy negado con este tema ps no soy muy experto y quiero aprender a hacer esto, tengo un index y en ese index tengo 1 form que como acción debe registrarme los datos que se ingresan en los input dentro de una tabla que tengo en ese mismo index, esto no es con manejo de db ni nada, es pura cuestión de aprendizaje, entonces lo que necesito es saber cómo puedo hacer para modificar estos registros en la misma tabla o que me retorne los values al form y ahí editarlos, pero no tengo ídea de cómo hacerlo...

Si pudieran brindarme colaboración los expertos acá en FDW Estaría muy agradecido :D ahora les muestro los códigos que tengo tanto del index, como del script =)

Index

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language='javascript' src='scripts.js'></script>
<link  rel="stylesheet" href="master.css" />
<title>:: Formato de Registro Con Jquery ::</title>
<style>
#T_R {display:none;}
</style>
</head>
 
<body onload='javascript: $("#nombre").focus();'>
<div id="F_R" align="center">
<form id="registro" action="javascript: insertar();" method="post" class="form">
<th align="center"><h1><strong>Registrar Datos</strong></h1></th><br />
<table align="center" class="table-condensed table-striped table-bordered" width="10px">
<tr>
<td><strong>Nombre</strong></td><td><input type="text" id="nombre" name="nombre" size="50"/></td>
</tr>
<tr>
<td><strong>Profesi&oacute;n</strong></td><td><input type="text" id="profesion" name="profesion" size="50"/></td>
</tr>
<tr>
<td><strong>Cargo</strong></td><td><input type="text" id="cargo" name="cargo" size="50"/></td>
</tr>
<tr>
<tr>
<td><strong>Ciudad</strong></td><td><input type="text" id="ciudad" name="ciudad" size="30"/></td>
</tr>
<td><strong>Sexo</strong></td><td><input type="text" id="sexo"  name="sexo" maxlength="30" /></td>
</td>
</tr>
<table align="center" id="botones">
<tr><td><button id="btn1" class="btn btn-primary" onclick="add()">Ingresar</button> <button type="reset" id="btn2" class="btn btn-inverse"">Cancelar</button></td></tr>
</table>
<input type="hidden" id="registros" name="registros" value="0"/>
</table>
</form>
</div>
<br />
<div id="T_R" align="center">
<table id="tabla_resultados" class="table-condensed table-striped table-bordered" width="600px">
<tr valign="center">
<td><b>NOMBRE</b></td>
<td><b>PROFESI&Oacute;N</b></td>
<td><b>CARGO</b></td>
<td><b>CIUDAD</b></td>
<td><b>SEXO</b></td>
<td><b>Opciones</b></td>
</tr>
</table>
</div>
 
</body>
</html>

Scripts.js

Código Javascript:

Ver original$(document).ready(function(){
clean();
});
 
function clean(){
var selinputs = $(":input");
selinputs.val("");
};
 
function insertar(elem){
var id = $("#registros").val();
$("#registros").val();
$("#registros").val(parseInt($("#registros").val()) + 1);
var nomb = $('#nombre').attr('value');
var profes = $('#profesion').attr('value');
var carg = $('#cargo').attr('value');
var ciud = $('#ciudad').attr('value');
var sex = $('#sexo').attr('value');
var delt = "<button id='eliminar' name='eliminar' class='btn btn-danger' onclick='javascript: borrar("+id+")'>X</button>";
var eddit = "<button id='mas_r' name='mas_r' class='btn btn-info' onclick='javascript: editar()'>+</button>";
var new_row = "<tr id='n_row"+id+"'><td>"+nomb+"</td><td>"+profes+"</td><td>"+carg+"</td><td>"+ciud+"</td><td>"+sex+"</td><td>"+delt+" "+eddit+"</td></tr>";
$("#tabla_resultados").append(new_row);
document.getElementById('registro').reset();
};
 
function add(){
$("#T_R").show(1000);
$("#nombre").focus();
return false;
};
 
function editar(){
return false;
};
 
function borrar(v_id){
$("#n_row" + v_id).remove();
return false;
};

De igual manera el eliminar y el insertar no me andan como quiero, ps así como la tabla de los registros está oculta, cuándo se ingresa el 1er registro tiene el efecto show de jquery, pero quisiera implementarlo igual para cada registro nuevo y para cada eliminación el hide... pero ps soy nuevo y no sé cómo hacerlo sin plugins... ya que me parece mejor aprender primero el manejo del jQuery y ahí si después los plugins

De igual manera, muchas gracias a todos los que me colaboren con mis inquietudes

Saludos y gracias :P