Estou tentando fazer o código da aula 1, vídeo 2 do javascript avançado 1, com jquery, mas não estou conseguindo.
Esse é o código da aula:
var campos = [
document.querySelector('#data'),
document.querySelector('#quantidade'),
document.querySelector('#valor')
];
var tbody = document.querySelector('table tbody');
document.querySelector('.form').addEventListener('submit', function(event) {
event.preventDefault();
var tr = document.createElement('tr');
campos.forEach(function(campo) {
var td = document.createElement('td');
td.textContent = campo.value;
tr.appendChild(td);
});
var tdVolume = document.createElement('td');
tdVolume.textContent = campos[1].value * campos[2].value;
tr.appendChild(tdVolume);
tbody.appendChild(tr);
});Esse é o meu código:
var formulario = $(".form");
var tbody = $("table tbody");
var campos = [];
$(function() {
adicionaCampos();
});
function adicionaCampos(){
formulario.submit(function(event) {
event.preventDefault();
var tr = $("<tr>");
var data = $("#data").val();
var quantidade = $("#quantidade").val();
var valor = $("#valor").val();
var tdVolume = $("<td>");
tdVolume.text(quantidade * valor);
campos.push(data, quantidade, valor, tdVolume);
$(campos).each(function(a) {
var td = $('<td>');
td.text(campos[a]);
tr.append(td);
});
tr.append(tdVolume);
tbody.append(tr);
});
}O que está errado? Como fazer uma versão melhor desse código?
Quando eu adiciono os valores na tabela seguidamente, uma hora a tabela começa a comprimir os títulos e expandir os valores pro lado ao invés de colocar os valores um embaixo do outro.
Além disso, a função está criando um objeto e colocando antes do volume!
