Te doy la bienvenida a nuestra página web, en este sitio encontrarás la respuesta a lo que buscabas.
Ejemplo 1: crear una tabla html dinámicamente usando javascript
function generate_table()
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// creating all cells
for (var i = 0; i < 2; i++)
// creates a table row
var row = document.createElement("tr");
for (var j = 0; j < 2; j++)
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell in row "+i+", column "+j);
cell.appendChild(cellText);
row.appendChild(cell);
// add the row to the end of the table body
tblBody.appendChild(row);
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
Ejemplo 2: agregar fila de tabla dinámica de javascript
<HTML><HEAD><TITLE> Add/Remove dynamic rows in HTML table TITLE><SCRIPTlanguage="javascript">functionaddRow(tableID)var table =document.getElementById(tableID);var rowCount = table.rows.length;var row = table.insertRow(rowCount);var colCount = table.rows[0].cells.length;for(var i=0; i<colCount; i++)var newcell = row.insertCell(i);
newcell.innerHTML= table.rows[0].cells[i].innerHTML;//alert(newcell.childNodes);switch(newcell.childNodes[0].type)case"text":
newcell.childNodes[0].value="";break;case"checkbox":
newcell.childNodes[0].checked=false;break;case"select-one":
newcell.childNodes[0].selectedIndex=0;break;functiondeleteRow(tableID)tryvar table =document.getElementById(tableID);var rowCount = table.rows.length;for(var i=0; i<rowCount; i++)var row = table.rows[i];var chkbox = row.cells[0].childNodes[0];if(null!= chkbox &&true== chkbox.checked)if(rowCount <=1)alert("Cannot delete all the rows.");break;
table.deleteRow(i);
rowCount--;
i--;catch(e)alert(e);SCRIPT>HEAD><BODY><INPUTtype="button"value="Add Row"onclick="addRow('dataTable')"/><INPUTtype="button"value="Delete Row"onclick="deleteRow('dataTable')"/><TABLEid="dataTable"width="350px"border="1"><TR><TD><INPUTtype="checkbox"name="chk"/>TD><TD><INPUTtype="text"name="txt"/>TD><TD><SELECTname="country"><OPTIONvalue="in">IndiaOPTION><OPTIONvalue="de">GermanyOPTION><OPTIONvalue="fr">FranceOPTION><OPTIONvalue="us">United StatesOPTION><OPTIONvalue="ch">SwitzerlandOPTION>SELECT>TD>TR>TABLE>BODY>HTML>valoraciones y comentarios
Finalizando este artículo puedes encontrar los comentarios de otros gestores de proyectos, tú también eres capaz mostrar el tuyo si te apetece.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)