tablas - Crear tabla usando Javascript
recorrer tabla javascript (7)
Tengo una función de JavaScript que crea una tabla con 3 filas 2 celdas.
¿Alguien podría decirme cómo puedo crear la siguiente tabla usando mi función (tengo que hacer esto para mi situación)?
Mi HTML:
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
JavaScript:
function tableCreate() {
//body reference
var body = document.getElementsByTagName("body")[0];
// create elements <table> and a <tbody>
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// cells creation
for (var j = 0; j <= 2; j++) {
// table row creation
var row = document.createElement("tr");
for (var i = 0; i < 2; i++) {
// create element <td> and text node
//Make text node the contents of <td> element
// put <td> at end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell is row "+j+", column "+i);
cell.appendChild(cellText);
row.appendChild(cell);
}
//row added to end of table body
tblBody.appendChild(row);
}
// append the <tbody> inside the <table>
tbl.appendChild(tblBody);
// put <table> in the <body>
body.appendChild(tbl);
// tbl border attribute to
tbl.setAttribute("border", "2");
}
Código ligeramente más corto usando insertRow e insertCell :
function tableCreate(){
var body = document.body,
tbl = document.createElement(''table'');
tbl.style.width = ''100px'';
tbl.style.border = ''1px solid black'';
for(var i = 0; i < 3; i++){
var tr = tbl.insertRow();
for(var j = 0; j < 2; j++){
if(i == 2 && j == 1){
break;
} else {
var td = tr.insertCell();
td.appendChild(document.createTextNode(''Cell''));
td.style.border = ''1px solid black'';
if(i == 1 && j == 1){
td.setAttribute(''rowSpan'', ''2'');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();
Además, esto no utiliza algunas "malas prácticas", como establecer un atributo de border lugar de usar CSS, y accede al body través de document.body lugar de document.getElementsByTagName(''body'')[0] ;
Espero que encuentres esto útil.
HTML:
<html>
<head>
<link rel = "stylesheet" href = "test.css">
<body>
</body>
<script src = "test.js"></script>
</head>
</html>
JAVASCRIPT:
var tableString = "<table>",
body = document.getElementsByTagName(''body'')[0],
div = document.createElement(''div'');
for (row = 1; row < 101; row += 1) {
tableString += "<tr>";
for (col = 1; col < 11; col += 1) {
tableString += "<td>" + "row [" + row + "]" + "col [" + col + "]" + "</td>";
}
tableString += "</tr>";
}
tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);
Esto debería funcionar (a partir de algunas modificaciones a su código anterior).
function tableCreate() {
var body = document.getElementsByTagName(''body'')[0];
var tbl = document.createElement(''table'');
tbl.style.width = ''100%'';
tbl.setAttribute(''border'', ''1'');
var tbdy = document.createElement(''tbody'');
for (var i = 0; i < 3; i++) {
var tr = document.createElement(''tr'');
for (var j = 0; j < 2; j++) {
if (i == 2 && j == 1) {
break
} else {
var td = document.createElement(''td'');
td.appendChild(document.createTextNode(''/u0020''))
i == 1 && j == 1 ? td.setAttribute(''rowSpan'', ''2'') : null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
var btn = document.createElement(''button'');
btn.innerHTML = "Create Table";
document.body.appendChild(btn);
btn.addEventListener("click", createTable, true);
function createTable(){
var div = document.createElement(''div'');
div.setAttribute("id", "tbl");
document.body.appendChild(div)
document.getElementById("tbl").innerHTML = "<table border = ''1''>" +
''<tr>'' +
''<th>Heading</th>'' +
''<th>Heading</th> '' +
''<th>Heading</th>'' +
''</tr>'' +
''<tr>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''</tr>'' +
''<tr>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''</tr>'' +
''<tr>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''<td>cell</td>'' +
''</tr>''
};
<!DOCTYPE html>
<html>
<body>
<p id="p1">
<b>Enter the no of row and column to create table:</b>
<br/><br/>
<table>
<tr>
<th>No. of Row(s) </th>
<th>No. of Column(s)</th>
</tr>
<tr>
<td><input type="text" id="row" value="4" /> X</td>
<td><input type="text" id="col" value="7" />Y</td>
</tr>
</table>
<br/>
<button id="create" onclick="create()">create table</button>
</p>
<br/><br/>
<input type="button" value="Reload page" onclick="reloadPage()">
<script>
function create() {
var row = parseInt(document.getElementById("row").value);
var col = parseInt(document.getElementById("col").value);
var tablestart="<table id=myTable border=1>";
var tableend = "</table>";
var trstart = "<tr bgcolor=#ff9966>";
var trend = "</tr>";
var tdstart = "<td>";
var tdend = "</td>";
var data="data in cell";
var str1=tablestart + trstart + tdstart + data + tdend + trend + tableend;
document.write(tablestart);
for (var r=0;r<row;r++) {
document.write(trstart);
for(var c=0; c<col; c++) {
document.write(tdstart+"Row."+r+" Col."+c+tdend);
}
}
document.write(tableend);
document.write("<br/>");
var s="<button id="+"delete"+" onclick="+"deleteTable()"+">Delete top Row </button>";
document.write(s);
var relod="<button id="+"relod"+" onclick="+"reloadPage()"+">Reload Page </button>";
document.write(relod);
}
function deleteTable() {
var dr=0;
if(confirm("It will be deleted..!!")) {
document.getElementById("myTable").deleteRow(dr);
}
}
function reloadPage(){
location.reload();
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table id="myTable" cellpadding="2" cellspacing="2" border="1" onclick="tester()"></table>
<script>
var student;
for (var j = 0; j < 10; j++) {
student = {
name: "Name" + j,
rank: "Rank" + j,
stuclass: "Class" + j,
};
var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = student.name,
cell2.innerHTML = student.rank,
cell3.innerHTML = student.stuclass;
}
</script>
</body>
</html>
function addTable() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement(''TABLE'');
table.border = ''1'';
var tableBody = document.createElement(''TBODY'');
table.appendChild(tableBody);
for (var i = 0; i < 3; i++) {
var tr = document.createElement(''TR'');
tableBody.appendChild(tr);
for (var j = 0; j < 4; j++) {
var td = document.createElement(''TD'');
td.width = ''75'';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}