Agregar elementos <select> dinamicamente

hieloverde · #1 (**permalink**) 20/07/2005, 12:09

Hola,

El problema es que quiero que cuando algun usuario presione un boton se agrege una celda y dentro de esta celda una lista desplegable, la celda la puedo agragar cuando se presiona el boton, pero la lista no la he podido agregar el codigo es este:

Código:

</script>
<SCRIPT LANGUAGE="JavaScript">
function agrega_celda(id){
    var lista = "<select name='opcion'>"
   + "<option>G</option>"
   + "<option>P</option>"
   + "</select>";
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild (document.createElement(lista))
    row.appendChild(td1);
    tbody.appendChild(row);
  }
</script>
</head>
<body> 
<input type="button" value="Agregar" onlick="agrega_celda('mi_tabla')">
<table id="mi_tabla" cellspacing="0" border="1">
  <tbody>
    <tr>
      <td>Columna</td>
    </tr>
  </tbody>
</table>
</body>

la funcion agrega una fila a la tabla y dentro una lista desplegable, lo unico es que la lista sale sin las opciones o sea en blanco.

A ver si alguien me pudiera ayudar con este codigo o si saben de alguna otra forma de hacer esto.

SALUDOS

SiR.CARAJ0DIDA · #2 (**permalink**) 20/07/2005, 14:24

td1.appendChild (document.createElement(lista))

lol eso no sirve..

hace asi:

Código PHP:

  var lista = document.createElement('select');

lista.name = "opcion";

var op1 = new Option("G", "G");

var op2 = new Option("P", "P");

lista.appendChild(op1);

lista.appendChild(op2);

td1.appendChild(lista);

hieloverde · #3 (**permalink**) 20/07/2005, 17:39

Ya con la correccion que me pusiste quedo la funcion asi

Código:

<SCRIPT LANGUAGE="JavaScript">
function agrega_celda(id){
            var tbody = document.getElementById
	(id).getElementsByTagName("TBODY")[0];
            var row = document.createElement("TR")
            var td1 = document.createElement("TD")
	var lista = document.createElement('select'); 
	lista.name = "opcion"; 
	var op1 = new Option("G", "G"); 
	var op2 = new Option("P", "P"); 
	lista.appendChild(op1); 
	lista.appendChild(op2); 
	td1.appendChild(lista); 
	row.appendChild(td1);
	tbody.appendChild(row);
	}
</script>

pone el select dentro de la celda pero no aparecen las etiquetas, al enviar la opcion dentro de un formulario con metodo get la variable si existe, Ej: opcion=G ya solo falta que se vea la etiqueta de la opcion a la hora de seleccionar.

Si me pudieras decir como se resuelve esto.

Saludos

SiR.CARAJ0DIDA · #4 (**permalink**) 20/07/2005, 19:02

jaja me acuerdo que tuve ese problema en explorer y la solucion fue crear los options asi:

var op1 = document.createElement('option');
var op2 = document.createElement('option');
op1.value = "G";
op2.value = "P";
var txt1 = document.createTextNode('texto de la opcion 1');
var txt2 = document.createTextNode('texto de la opcion 2');
op1.appendChild(txt1);
op2.appendChild(txt2);

debería andar asi, sino prueba usando un explorador como la gente (firefox)

hieloverde · #5 (**permalink**) 21/07/2005, 10:03

Si, gracias ya me funciono, aun en el explorer ya me pone las etiquetas en las opciones.

Saludos

Angellie · #6 (**permalink**) 27/07/2005, 22:45

Hola...

Fijate que me encuentro en la misma situación tuya de que quiero agregar filas... de una forma dinámica...

Pues ahora me encuentro en la terrible duda de eliminar estás famosas filas, me refiero a que asi como las puedo agregar dinámicamente las puedo eliminar dinámicamente, el caso es que no es tan sencillo como se escribe....

bueno... en fin... aqui te paso esto a ver que te parece, pero no me elimina las filas que yo le doy para que me elimine... por favor toda ayuda que puedas darme TE LA AGREDECERÍA EN EL ALMAAAAA!!!

Gracias de antemano...

aqui ta el codigo...

<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<link REL="STYLESHEET" HREF="EstiloWeb.css" TYPE="TEXT/CSS">
<title>Ingreso de Datos para el Número de Servicio (Movilnet) - CANTV Empresas</title>

<script LANGUAGE="javascript">
function salir(){
var retorno = confirm("¿Está Seguro que desea salir del Sistema de Cobranzas?");
if (retorno){
window.close();
}
}

function regresar(){
var retorno = confirm("¿Está Seguro de que desea Salir del Ingreso de Detalles de la Sumaria (Movilnet)?\n Recuerde que no se guardará nada si Usted no presiona el Botón de Aceptar");
if (retorno){
document.form_cobranzas.action = "Cobranzas.asp?NumCaso=" + <%=NumCaso%>;
document.form_cobranzas.submit();
}
}

function Get_NombreCodigo(targ,selObj,restore,fila)
{
var identificador=selObj.id.split("sel_codigo");
document.getElementById("sel_nombre_codigo"+identi ficador[1]).selectedIndex =selObj.selectedIndex;
}

//Agrega uan fila a la tabla de ajustes
function agregarAjuste(){
//var cantEncab = 5;
var idFila = 9000;
//Inserto la nueva fila en la tabla
var nuevaFila = document.getElementById("tabla_ajuste").insertRow( );
var j = nuevaFila.rowIndex;
var k = 1
//Inserto todas las celdas a la nueva fila
var nuevaCelda = document.getElementById("tabla_ajuste").rows[j].insertCell();
document.getElementById("tabla_ajuste").rows[j].cells[0].borderColor="black";
nuevaCelda.innerHTML = "<center><input type='checkbox' class='txt_CampoValor' size='1' id='chk_borrarAjuste" + idFila + k + "' name='chk_borrarAjuste" + idFila + k + "'></center>";
var nuevaCelda = document.getElementById("tabla_ajuste").rows[j].insertCell();
document.getElementById("tabla_ajuste").rows[j].cells[1].borderColor="black";
nuevaCelda.innerHTML = "<center><input type='text' class='txt_CampoValor' id='central" + idFila + k + "' name='central" + idFila + k + "' maxlength='30'></center>";
var nuevaCelda = document.getElementById("tabla_ajuste").rows[j].insertCell();
document.getElementById("tabla_ajuste").rows[j].cells[2].borderColor="black";
nuevaCelda.innerHTML = "<center><input type='text' class='txt_CampoValor' id='numero" + idFila + k + "' name='numero" + idFila + k + "' maxlength='30'></center>";

var nuevaFila_2 = document.getElementById("tabla_ajuste").insertRow( );
var k= k + 1;

//Disminuyo el id de los campos para cuando se agregue otra fila
idFila = idFila - 1;
}
function eliminarFilas(tabla_ajuste, chk_borrarAjuste, cantEncab){
//cantEncab = 2;
var filasSeleccionadas = 0;
var ultimaFila = 0;
//Obtengo el indice de la ultima fila, para recorrer la fila desde el final
ultimaFila = document.getElementById(tabla_ajuste).rows.length-2;

//Recorro la tabla para eliminar las filas seleccionadas
for(var i=ultimaFila; i >= cantEncab; i--){
//Obtengo los indices de las filas seleccionadas y las borro
var elemCheck = document.getElementById(tabla_ajuste).rows[i].cells[0].outerHTML;
if (elemCheck.indexOf("CHECKED") != -1){

document.getElementById(tabla_ajuste).deleteRow(i) ;

filasSeleccionadas = filasSeleccionadas + 1;

}
}

}
function Decimales(Numero, Decimales){
pot = Math.pow(10,Decimales);
return parseInt(Numero * pot) / pot;
}
</script>

</head>

<body bgcolor="#ffffff" bordercolor="#000099">
<form METHOD="post" name="form_cobranzas">
<table id="tabla_ajuste" width="800" border="1" cellpadding="0" cellspacing="1">
<tr bordercolor="#000000">
<td colspan="3" align="left" bgcolor="#000099"><strong class="txt_Subtitulo2">Detalles del Número de Sumaria del Cliente </strong></td>
</tr>
<tr bordercolor="#000000">
<td width="6%" align="center" bgcolor="#e1e1e1"><strong class="txt_CampoEtiqueta"><input type="checkbox" disabled></strong></td>
<td width="47%" align="left" bgcolor="#e1e1e1"><div align="center"><strong class="txt_CampoEtiqueta">Número Telefónico</strong></div></td>
<td width="47%" bgcolor="#e1e1e1" align="left"><div align="center"><strong class="txt_CampoEtiqueta">Número del Suscriptor</strong></div></td>
</tr>
<tr bordercolor="#000000">
<td width="6%" align="center"><input class="txt_CampoValor" type="checkbox"></strong></td>
<td width="47%" align="center"><input class="txt_CampoValor" name="txt_numTelf" type="text" maxlength="30" value="<%=NumTelefonico%>"></td>
<td width="47%" align="center"><input class="txt_CampoValor" name="txt_numSusc" type="text" maxlength="30" value="<%=NumSuscriptor%>"></td>
</tr>
</table>
<table id="tabla_acciones" width="800" border="1" cellpadding="0" cellspacing="1">
<tr bordercolor="#000000">
<td width="53%" align="center" bgcolor="#e1e1e1"><a href="javascript:eliminarFilas('tabla_ajuste','aju stes',2);" class="lnk_enlace">Eliminar Filas</a></td>
<td width="47%" align="center" bgcolor="#e1e1e1"><a href="javascript:agregarAjuste();" class="lnk_enlace">Agregar Filas</a></td>
</tr>
</table>
</form>
</body>
</html>

Bye bye.... Gracias...

Angellie Ferrer Inatti...

SiR.CARAJ0DIDA · #7 (**permalink**) 28/07/2005, 08:49

no voy a leer todo eso, pero las filas se borran con deleteRow()