tablas - Matriz de Javascript a la tabla html
tablas dinamicas html javascript (5)
Quiero hacer una tabla html desde una matriz. Quiero usar la función de bucle para hacer esto. Pero me cuesta descubrir cómo puedo hacer un bucle de una matriz en una tabla html. Quiero tener el nombre de los países en la primera sección y el "país" en la parte superior de los países. En la última sección, quiero tener las capitales y "Capital" en la parte superior.
Aquí está mi código html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
</script>
</body>
</html>
Puede hacer esto al recorrer la lista de países y crear una cadena HTML. Luego puedes poner eso dentro del tbody usando un selector de clase o id. Aquí hay un ejemplo-
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
var bodyString = '''';
$.each(country, function(index, ctry) {
bodyString += (''<tr><td>''+ctry+''</td><td>''+capital[index]+''</td></tr>'');
});
$(''.countriesTable tbody'').html(bodyString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="countriesTable">
<thead>
<tr><th>Country</th><th>Capital</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Creo que quieres algo como esto, que es javascript puro (Ejecutar el fragmento) -
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
var table= document.createElement(''table''),
thead = document.createElement(''thead''),
tbody = document.createElement(''tbody''),
th,
tr,
td;
th = document.createElement(''th''),
th.innerHTML="County";
table.appendChild(th);
th = document.createElement(''th'');
th.innerHTML= "Capital"
table.appendChild(th);
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);
for(var i=0;i<country.length;i++){
tr = document.createElement(''tr''),
//for county
td= document.createElement(''td'');
td.innerHTML=country[i];
tr.appendChild(td);
//for capital
td = document.createElement(''td'');
td.innerHTML=capital[i];
tr.appendChild(td);
tbody.appendChild(tr);
}
table{
border-collapse: collapse;
}
th,td{
border:1px solid #000;
}
es una buena forma de usar literales de plantilla
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Array2Table</title>
</head>
<body>
<div id="tableContent"></div>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
const tmpl = (country,capital) => `
<table><thead>
<tr><th>Country<th>Capital<tbody>
${country.map( (cell, index) => `
<tr><td>${cell}<td>${capital[index]}</tr>
`).join('''')}
</table>`;
tableContent.innerHTML=tmpl(country, capital);
</script>
</body>
</html>
para Internet Explorer:
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var tmpl = function tmpl(country, capital) {
return "<table><thead><tr><th>Country<th>Capital<tbody>" +
country.map(function (cell, index) {
return "<tr><td>" + cell + "<td>" +
capital[index] + "</tr>";
}).join('''') + "</table>";
};
tableContent.innerHTML = tmpl(country, capital);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"];
var bodyString = '''';
$.each(country, function(index, country) {
bodyString += (''<tr><td>''+country+''</td><td>''+capital[index]+''</td></tr>'');
});
$(''.country tbody'').html(bodyString);
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped country">
<thead>
<tr><th>Country</th><th>Capital</th>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Hice una herramienta fácil para esto - https://github.com/dszakal/ArrayToTable
Ejemplo:
var tableGen = new ArrayToTable();
// optional
tableGen.tableclasses = ''bluetable table-with-oddeven''; // for css
tableGen.tableid = ''something-unique'';
dataArray = [
{
country: ''Norway'',
capital: ''Oslo''
}
,
{
country: ''Sweden'',
capital: ''Stockholm''
}
,
{
country: ''Denmark'',
capital: ''Copenhagen''
}
];
tableGen.putTableHtmlToId(dataArray, ''tableHere'');