Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

172
Visualizações
How to store function output into <tr></tr> element

I'm working on a simple expense tracker project. I need to store the output of createAlltd() in a new element every time i click btn and attach it to element. So far i only managed to store all td's into tbody but without tr element and vice versa.

const exp = document.querySelector('.addExpense'); //tbody
const expInp = document.querySelector('.expense');
const dateInp = document.querySelector('.date');
const amountInp = document.querySelector('.amount');
const btn = document.querySelector('.btn');

function createTd(e){
     var td = document.createElement('td');;
     td.innerText = e.value;
     e.value = "";
}

function createTr(){
    var newTr = document.createElement('tr');
    newTr.className = ".newTr";
    exp.append(newTr);
}

function createAllTd(){ 
    createTd(expInp); 
    createTd(dateInp); 
    createTd(amountInp);
   
  
}


btn.addEventListener('click', (e) => {
        e.preventDefault();  
        createTr();
        createAllTd();
        expInp.focus();
    });
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

So what you need to do is somehow fetch the row that you have created and then add the columns to that row.

Hence We can change the createTr() function to return the freshly appended row by fetching the lastElement inside <tbody>. Hence the function would now look like:

function createTr(){
    var newTr = document.createElement('tr');
    newTr.className = ".newTr";
    exp.append(newTr);
    return newTr;
}

now that we have the access to the newly created row via code, we can pass this to our createAllTd() function and from there to createTd() and append the <td> to the <tr> element as now available. Hence the functions now look like the following:

function createTd(e, elNewTr){
     var td = document.createElement('td');;
     td.innerText = e.value;
     e.value = "";
     // This statement appends the TD inside the TR as passed in the parameter
     elNewTr.append(td);
}

function createAllTd(elNewTr){
    // Pass the newly created TR element to the TD functions so that we can append TD inside the new TR 
    createTd(expInp, elNewTr); 
    createTd(dateInp, elNewTr); 
    createTd(amountInp, elNewTr);
}

Hence the final code now looks like this:

const exp = document.querySelector('.addExpense'); //tbody
const expInp = document.querySelector('.expense');
const dateInp = document.querySelector('.date');
const amountInp = document.querySelector('.amount');
const btn = document.querySelector('.btn');


function createTd(e, elNewTr){
     var td = document.createElement('td');;
     td.innerText = e.value;
     e.value = "";
     // This statement appends the TD inside the TR as passed in the parameter
     elNewTr.append(td);
}

function createTr(){
    var newTr = document.createElement('tr');
    newTr.className = ".newTr";
    exp.append(newTr);
    return newTr;
}

function createAllTd(elNewTr){
    // Pass the newly created TR element to the TD functions so that we can append TD inside the new TR 
    createTd(expInp, elNewTr); 
    createTd(dateInp, elNewTr); 
    createTd(amountInp, elNewTr);
}

btn.addEventListener('click', (e) => {
        e.preventDefault(); 
        // Catch the new TR element as returned 
        elNewTr = createTr();
        // Pass it to the TD creation process for usage
        createAllTd(elNewTr);
        expInp.focus();
    });

This should do it.

about 4 years ago · Juan Pablo Isaza Relatório

0

Yor problem is that you create separated elements of tr and td but not append the td's to relevant tr. Use function .appendChild() fo this, like:

 tr.appendChild(td);

I updated your code, see below. Put attention - the functions to crate row and cells now have return values. And event listener uses those values to append the cells to the row.

Unfortunately, I can't test the solution because of missing HTML and data at the question.

const exp = document.querySelector('.addExpense'); //tbody
const expInp = document.querySelector('.expense');
const dateInp = document.querySelector('.date');
const amountInp = document.querySelector('.amount');
const btn = document.querySelector('.btn');

function createTd(e){
     var td = document.createElement('td');;
     td.innerText = e.value;
     e.value = "";
}

function createTr(){
    var newTr = document.createElement('tr');
    newTr.className = ".newTr";
    exp.append(newTr);
    return newTr;
}

function createAllTd(){ 
    let tds = [];
    tds.push(createTd(expInp)); 
    tds.push(reateTd(dateInp)); 
    tds.push(createTd(amountInp));
    return tds;
}


btn.addEventListener('click', (e) => {
        e.preventDefault();  
        let row = createTr();
        let cells = createAllTd();
        cells.forEach(cell => {
            row.appendChild(cell);
        })
        expInp.focus();
});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda