Insertar inputs dinamicos

chalchis · #1 (**permalink**) 08/09/2005, 14:38

hola amigos tengo este script para insertar un input text dinamicamente asi como una imagen para borrar la fila.

Funciona de maravilla tanto en ie como mozilla y firefox
el detalle que quiero hacer es como insertar junto con la imagen un radio
podran ayudarme

gracias
espero sus comentarios

<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

function AddRowsToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

var cellRight = row.insertCell(0);
var el = document.createElement('input');

//el.setAttribute('type', 'text');
//el.setAttribute('name', 'answers[]' + iteration);
//el.setAttribute('size', '30');

el.type = "text"
el.name = "answers[]"
el.size="38"
el.className = "txtBoxStyle3"
el.id = "answers"

//cellRight.setAttribute('id',iteration)

cellRight.appendChild(el);
// var aa = document.createElement("<a href='#' onClick='RemoveRowFromTable();return false;'>Remove Last</a>'");
var aa = document.createElement("a");
aa.setAttribute('href', '#');
var clickName = new Function("DeleteRow(this)");
aa.onclick = clickName;
aa.innerHTML = "<img src=../Imagen/Examen_gif/del.gif border=0>";
cellRight.appendChild(aa);

}
function DeleteRow(x)
{
while (x.tagName.toLowerCase() !='tr')
{
if(x.parentElement)
x=x.parentElement;
else if(x.parentNode)
x=x.parentNode;
else
return;
}
var rowNum=x.rowIndex;
while (x.tagName.toLowerCase() !='table')
{
if(x.parentElement)
x=x.parentElement;
else if(x.parentNode)
x=x.parentNode;
else
return;
}
x.deleteRow(rowNum);
}

function RemoveRowFromTable(rowid) {
//alert("sadfs");
var tbl = document.getElementById(iteration);
//var lastRow = tbl.rows.length;
//if (lastRow > 1)
tbl.deleteRow(rowid);
}

function este()
{
for(var y = 0;y < document.forms.formulario.answers.length;y++)
{

document.formulario.answers[y].focus();

}
}
</script>
</head>

<body>
<form name="formulario" method="post" onSubmit="return verificar(this)" action="examen_pregunta_nuevo.php">
<table cellpadding="0" cellspacing="0" align="left" width="304" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" align="center" border="0">
<tr class="texforms">
<td align="left">Respuestas: <input name="button" type=button onClick="AddRowsToTable();este();return false;" value="+" class="Buttonforms"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>

<table cellpadding="1" cellspacing="0" width="100%" id="tblSample" border="0">
<tr>
<td>
<input type="text" name="answers[]" id="answers" class="txtBoxStyle3" size="38">
<img src="../Imagen/Examen_gif/del.gif" border="0" >
<input type="radio" name="cierto" id="cierto">
</td>
</tr>
<tr>
<td>
<input type="text" name="answers[]" id="answers" class="txtBoxStyle3" size="38">
<img src="../Imagen/Examen_gif/del.gif" border="0" >
<input type="radio" name="cierto" id="cierto">
</td>
</tr>
</table>

</td>
</tr>
</table>

</form>
</body>
</html>

chalchis · #2 (**permalink**) 08/09/2005, 15:48

var eta = document.createElement('input');
eta.setAttribute('type', 'radio');
eta.setAttribute('name', 'correcto');
cellRight.appendChild(eta);

agregarlo despues
cellRight.appendChild(aa);

y veo que si lo crea pero solo corre bien en mozilla y en firefox
pero en ie lo imprime pero no me deja seleccionar el radio.

flaviovich · #3 (**permalink**) 08/09/2005, 19:31

Amigo, asi funciona en cualquier browser:

Código HTML:

function AddRowsToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellRight = row.insertCell(0);
cellRight.innerHTML="<input type='text' name='answers[]' id='answers' class='txtBoxStyle3' size='38'><a hre='#' onClick='DeleteRow(this)'> <img src='../Imagen/Examen_gif/del.gif' border='0'></a> <input type='radio' name='correcto' id='correcto'>";
}

Chequea esta funcion por si acaso: cloneNode().

chalchis · #4 (**permalink**) 09/09/2005, 08:55

Gracias flaviovich que facil lo hiciste ver
muchas gracias men me sirvio.

flaviovich · #5 (**permalink**) 09/09/2005, 13:31

Pues si, es realmente simple.
Me parece que lo que tu hacias es para otro caso. Para algun caso mas complejo, es decir, cuando los objetos que tu creabas (textbox, imagen, radiobutton) podrian tener atributos totalmente diferentes.
Bueno, me alegra haberte ayudado.
La verdad, yo vi un caso parecido en un foro ruso :)