How to store function output into <tr></tr> element-CodePudding

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();
    });

CodePudding user response：

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();
});

CodePudding user response：

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.