Criei uma tabela via javascript ao manipular elementos de um array, quanto à isso esta tudo correto, porém, só consigo adicionar a tabela no DOM por uma função comum ou por uma função anônima do Jquery, mas quando a função anônima é do javascript, ele não consegue adicionar a tabela ao DOM...
feita com função anônima js (não funciona):
(function(){
const alunos = [
{ nome: 'Ana', nota: 9.1 },
{ nome: 'Bianca', nota: 8.4 },
{ nome: 'Carlos', nota: 7.6 },
{ nome: 'Julia', nota: 9.7 }
]
const linhas = alunos.map(aluno => {
const tdNome = `<td>${aluno.nome}</td>`
const tdNota = `<td>${aluno.nota}</td>`
return '<tr>' + tdNome + tdNota + '</tr>'
})
const tabela = linhas.reduce((tabela, elemendo) => tabela + elemendo ,'')
document.getElementById('conteudo').insertAdjacentHTML('beforeend', `<table>${tabela}</table>`)
})
feita com função comum em js (funciona):
function criarTabela(){
const alunos = [
{ nome: 'Ana', nota: 9.1 },
{ nome: 'Bianca', nota: 8.4 },
{ nome: 'Carlos', nota: 7.6 },
{ nome: 'Julia', nota: 9.7 }
]
const linhas = alunos.map(aluno => {
const tdNome = `<td>${aluno.nome}</td>`
const tdNota = `<td>${aluno.nota}</td>`
return '<tr>' + tdNome + tdNota + '</tr>'
})
const tabela = linhas.reduce((tabela, elemendo) => tabela + elemendo ,'')
document.getElementById('conteudo').insertAdjacentHTML('beforeend', `<table>${tabela}</table>`)</table>`)
}
criarTabela()
feita com função anônima Jquery (funciona):
$(function (){
const alunos = [
{ nome: 'Ana', nota: 9.1 },
{ nome: 'Bianca', nota: 8.4 },
{ nome: 'Carlos', nota: 7.6 },
{ nome: 'Julia', nota: 9.7 }
]
const linhas = alunos.map(aluno => {
const tdNome = $('<td>').html(aluno.nome)
const tdNota = $('<td>').html(aluno.nota)
return $('<tr>').append(tdNome, tdNota)
})
const tabela = $('<table>').append(linhas)
.css("border", "solid 5px")
$('#conteudo').append(tabela)
})
o html não possui nada de especial, apenas uma div com um ID:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>tabelo feita de um objeto</title>
<link rel='stylesheet' href='css/estilo.css'>
<script src='js/jquery.js'></script>
</head>
<body class='conteudo exercicio'>
<h1>criando tabela</h1>
<div id='conteudo'></div>
(function() { /* ... */ })()