Bueno, ya hice mi propuesta, no leí tu post antes
dandreta, de todas maneras ya que la he hecho la voy a postear.
Código PHP:
<select id="sel" onchange="if(this.value!='-') agregarALaTabla( this.options[this.options.selectedIndex].text );">
<option value="-">Seleccione por favor</option>
<option>casa</option>
<option>coche</option>
<option>avión</option>
<option>tren</option>
<option>monorrail</option>
<option>trolebus</option>
</select>
<input type="button" onclick="eliminarUltimo()" value="eliminar el último" /> <br/>
<table id="tabla" border="1" width="200px">
<thead>
<tr>
<th width="30px">#</th>
<th>Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var elementos=0;
function agregarALaTabla(item) {
// creamos filas y celdas, y las anidamos entre sí
var fila=document.createElement("TR");
var celdaNum=document.createElement("TD");
var celdaItem=document.createElement("TD");
fila.appendChild(celdaNum);
fila.appendChild(celdaItem);
// sumamos uno a elementos, y lo colocamos después
celdaNum.appendChild( document.createTextNode(++elementos) );
// colocamos el item en la celda de al lado
celdaItem.appendChild( document.createTextNode(item) );
// adjuntamos al tbody de la tabla
document.getElementById("tabla").getElementsByTagName("tbody")[0].appendChild(fila);
}
function eliminarUltimo() {
if(elementos==0)
alert("No hay elementos que borrar");
else {
var laTablaTbody=document.getElementById("tabla").getElementsByTagName("tbody")[0];
// borramos la fila (elementos-1) porque la primera fila es de información
laTablaTbody.removeChild( laTablaTbody.getElementsByTagName("TR")[elementos-1] );
elementos--; //restamos a elementos uno, porque hay una fila menos
}
}
</script>
Sólo un apunte: intenta no utilizar nombres de variables iguales a los ID's de los elementos en el documento (
tabla), verás que en firefox salta una advertencia:
Cita: Advertencia: Elemento referenciado por ID/NAME en el ámbito global. Use el estándar del W3C document.getElementById() en su lugar.
Cita:
Iniciado por dandreta ¿Sabeis que instrucción o que tendría que añadir y donde para que las opciones del desplegable que ya han sido seleccionadas no se puedan volver a añadir a la tabla?
Podrías "marcar" las opciones del select con un atributo inventado por ti. O también se me ocurre almacenar en un array las <option> agregadas, y mirar a ver si ha sido agregado esa opción, pero me parece un poco más lío esa alternativa.
El problema viene al eliminar de la tabla. Hay que decirle que sí puede agregar esa opción. Yo lo he resuelto relacionando las filas de la tabla y los índices del select mediante un atributo llamado
queOpcionDelSelect, así resulta más sencillo:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>
<body>
<select id="sel" onchange="agregar()">
<option value="-">Seleccione por favor</option>
<option>casa</option>
<option>coche</option>
<option>avión</option>
<option>tren</option>
<option>monorrail</option>
<option>trolebus</option>
</select>
<input type="button" onclick="eliminarUltimo()" value="eliminar el último" /> <br/>
<table id="tabla" border="1" width="200px">
<thead>
<tr>
<th width="30px">#</th>
<th>Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var elementos=0;
var elSel=document.getElementById("sel");
var laTablaTbody=document.getElementById("tabla").getElementsByTagName("tbody")[0];
//devuelve true si debo agregar el elemento, false si no
function deboAgregar() {
var opcion=elSel.options[elSel.options.selectedIndex];
if ( opcion.value == '-' || opcion.getAttribute("estaAgregado") == "si" || opcion.getAttribute("estaAgregado") == "null" )
return false;
else
return true;
}
function agregarALaTabla() {
var index=elSel.options.selectedIndex;
var opcion=elSel.options[index];
var item=opcion.text;
// creamos filas y celdas, y las anidamos entre sí
var fila=document.createElement("TR");
var celdaNum=document.createElement("TD");
var celdaItem=document.createElement("TD");
fila.appendChild(celdaNum);
fila.appendChild(celdaItem);
// sumamos uno a elementos, y lo colocamos después
celdaNum.appendChild( document.createTextNode(++elementos) );
// colocamos el item en la celda de al lado
celdaItem.appendChild( document.createTextNode(item) );
// adjuntamos al tbody de la tabla
laTablaTbody.appendChild(fila);
// marcamos la opcion como agregada
opcion.setAttribute("estaAgregado","si");
// guardamos a qué index del select se refiere esta línea
fila.setAttribute("queOpcionDelSelect",index);
}
function agregar() {
if(deboAgregar())
agregarALaTabla();
else
alert('No agregaré elementos inválidos o duplicados.');
}
function eliminarUltimo() {
if(elementos==0)
alert("No hay elementos que borrar");
else {
// borramos la fila (elementos-1) porque la primera fila es de información
var fila=laTablaTbody.getElementsByTagName("TR")[elementos-1];
// ¿a qué opción del elemento se refiere esta fila? Lo guardamos antes en un atributo llamado queOpcionDelSelect
var index=fila.getAttribute("queOpcionDelSelect");
// le decimos que no está agregado
elSel.getElementsByTagName("option")[index].setAttribute("estaAgregado","no");
laTablaTbody.removeChild( fila );
elementos--; //restamos a elementos uno, porque hay una fila menos
}
}
</script>
</body>
</html>
Los he probado los dos en IE y en FF, y van bien.
Alguna duda más, comenta.
Un saludo!