attribute - Evento onclick en el botón creado dinámicamente en javascript
javascript on mouse click (2)
Eso es porque su función se está llamando a sí misma:
**function addRow(tableID) {**
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.setAttribute(''type'',''button'');
element1.setAttribute(''name'',''Add Row1'');
element1.setAttribute(''value'',''Add Row'');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "checkbox";
cell3.appendChild(element3);
**element1.onclick=addRow(tableID);**
}
Requisitos: Tengo una tabla con una fila y tres columnas. la primera columna tiene un botón. cuando hago clic en ese botón, se debe agregar una nueva fila a la tabla, y cuando hago clic en el botón en la fila recién agregada (es decir, creada dinámicamente), se debe agregar una nueva fila.
solo el último botón de la fila debería agregar una nueva fila, todos los botones anteriores deberían cambiar para eliminar los botones.
- Función de script java.
<html>
<head runat="server"><TITLE> Agregar / Eliminar filas dinámicas en la tabla HTML </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.setAttribute(''type'',''button'');
element1.setAttribute(''name'',''Add Row1'');
element1.setAttribute(''value'',''Add Row'');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "checkbox";
cell3.appendChild(element3);
element1.onclick=addRow(tableID);
}
</HEAD>
<BODY>
<TABLE id="dataTable" width="250px" border="1">
<TR>
<td><INPUT type="button" value="Add Row" name="Add Row" onclick="addRow(''dataTable'')"/></td>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE> </BODY> </html>
cuando ejecuto este código, obtengo una fila con tres columnas. cuando hago clic en el botón en la primera fila ... es agregar filas infinitamente. por favor, ayúdame a obtener resultados.
gracias por adelantado .
La razón por la cual este código no funciona es esta parte:
element1.onclick=addRow(tableID);
Lo que espera que suceda es asignar un valor de ''addRow (tableID)'' al atributo ''onclick'' del elemento recién creado.
Lo que realmente está haciendo es invocar la función ''addRow'' de inmediato, hacer que el programa se repita indefinidamente.
El camino más corto para arreglar esto sería usar algo como esto en su lugar:
element1.setAttribue(''onclick'',''addRow("''+tableID+''")'');