hola comunidad, estoy tratando de hacer un grid editable con javascript, no estoy usando ningun framework porque en el proyecto
en el que estoy no quieren usar ningun framework de javascript, bueno tengo hecho algunas cosas pero me faltan muchas como por ejemplo
- el grid no tiene ningun estilo y quisiera ponerle uno que se paresca mas menos al grid de extjs o al de otro framework.
- no se como marcar las celdas que han sido editadas, creo que esto es para optimizar el envia de informacion a la base de datos
solo enviando la informacion modificada (si estoy mal que alguien me rectifique) y no se como hacer esto.
- otro problema que tengo es que cuando se hace clic sobre una celda entonces se me crea un input pero se me aumenta el tamaño de la celda,
quisiera que cuando hiciera clic en la celda se me cree el input y se ajustara al tamaño de la celda, es decir, que no se notara el cambio
cuando se crea el input o cuando desaparece.
aqui les pongo el codigo que tengo hecho para que el que pueda me ayude, se que estoy tratando de reinventar la rueda pero
tengo que acojerme a lo que se dice en el proyecto.
saludos manuelle
Código:
hola comunidad
<html>
<body onload="iniciarTabla();">
<table id="acusados" style="border: solid 1px #7f94aa; width: 695px; text-align: center;" cellspacing="0" >
<tr>
<th id="celda" ><label>Nombre</label> </th>
<th id="celda" ><label>Primer Apellido</label> </th>
<th id="celda" ><label>Segundo Apellido</label> </th>
<th id="celda" ><label>CI</label> </th>
</tr>
<tr>
<td id="celda" ><label>Manuel</label> </td>
<td id="celda" ><label>Delgado</label> </td>
<td id="celda" ><label>Fernandez</label> </td>
<td id="celda" ><label>87112734953</label> </td>
</tr>
<tr>
<td id="celda" ><label>Pedro</label> </td>
<td id="celda" ><label>Hernandez</label> </td>
<td id="celda" ><label>Lopez</label> </td>
<td id="celda" ><label>87112734954</label> </td>
</tr>
<tr>
<td id="celda" ><label>julio</label> </td>
<td id="celda" ><label>Frenandez</label> </td>
<td id="celda" ><label>Figueredo</label> </td>
<td id="celda" ><label>87112734955</label> </td>
</tr>
</table>
<script type="text/javascript">
function iniciarTabla()
{
var tabla = document.getElementById('acusados');
filas = tabla.getElementsByTagName('tr');
var cont= 0;
for (i=1; i< tabla.rows.length; i++)
{
tabla.rows[i].cells[0].onclick = function() {crearInput(this)};
tabla.rows[i].cells[1].onclick = function() {crearInput(this)};
tabla.rows[i].cells[2].onclick = function() {crearInput(this)};
tabla.rows[i].cells[3].onclick = function() {crearInput(this)};
nueva_columna = tabla.rows[i].insertCell(4);
ele = document.createElement('input');
ele.type = 'button';
ele.id="celda";
ele.value = "Eliminar";
ele.onclick = function() {borrar_acusados(this)} ;
nueva_columna.id = 'celda';
nueva_columna.width='20px';
nueva_columna.align='center';
nueva_columna.appendChild(ele);
}
}
function borrar_acusados(obj)
{
tabla = obj.parentNode.parentNode.parentNode;
tabla.removeChild(obj.parentNode.parentNode);
}
function crearInput(celda)
{
celda.onclick = function() {return false}
txt = celda.innerHTML;
celda.innerHTML = '';
var textbox= document.createElement('input');
obj = celda.appendChild(textbox);
obj.value = txt;
obj.focus();
obj.onblur = function()
{
txt = this.value;
if(!validarLetras(txt))
{
alert("Error: verifique que el campo contenga solo letras");
}
celda.removeChild(obj);
celda.innerHTML = txt;
celda.onclick = function() {crearInput(celda)}
}
}
</script>
</body>
</html>