Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!