Hola, tengo una tabla html de la que quiero que sólo las celdas con la misma clase puedan ser editables. Las funciones que tengo hacen que toda la tabla sea editable... ¿cómo podría hacerlo? Gracias de antemano.
Aquí os dejo el código que tengo...
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Editar datos de una tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="codigo.js"></script>
</head>
<body onload="iniciarTabla()">
<table id="t1">
<thead>
<tr id="botonera">
<td></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" > </input><input class="btEliminar" onclick="eliminar(this)" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
</tr>
<tr>
<td><input class="btAnadir" onclick="anadir()" type="button" name="boton" value="+" ></input><input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td class="td1">0</td>
<td class="td1">0</td>
<td class="td1">0</td>
<td class="td1">0</td>
<td class="td1">0</td>
<td class="td1">0</td>
</tr>
<?php
$numFilas = 5;
for($i = 1; $i <= $numFilas; $i++){
echo '<tr>
<td><input class="btAnadir" onclick="anadir()" type="button" name="boton" value="+" ></input><input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td class="td1">0</td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
</tr>';
}
echo '</table>';
?>
</body>
</html>
Código:
var miTabla = 't1'; // poner aquí el id de la tabla que queremos editar
// preparar la tabla para edición
function iniciarTabla() {
tab = document.getElementById(miTabla);
filas = tab.getElementsByTagName('tr');
for (i=1; fil = filas[i]; i++) {
celdas = fil.getElementsByTagName('td');
for (j=1; cel = celdas[j]; j++) {
cel.onclick = function() {crearInput(this)}
}
}
}
function crearInput(celda) {
celda.onclick = function() {return false}
txt = celda.innerHTML;
celda.innerHTML = '';
obj = celda.appendChild(document.createElement('input'));
obj.value = txt;
obj.focus();
obj.onblur = function() {
txt = this.value;
celda.removeChild(obj);
celda.innerHTML = txt;
celda.onclick = function() {crearInput(celda)}
}
}