Making table editable in modal

Question

I have 3 tables with two columns each (image). I want to make the table editable (edit row, add rows, delete rows) and I'm a little lost. Each table row has an edit button, and at the end of each table there is an "add" button.

If I want the modal title to either say edit or add would I need to make 2 different modals or is there a way to do this in JS?
How would I do about making the table editable? I tried putting together some JS (see below)

Modal:


        
          Edit Account

Tables:


      


       
         Cash $5322.54
         Credit Card $1362.21
         Checking Account $4322.50
         Savings Account $12322.50
    
 
    
      

      
        DOW JONES 50 TITANS $5322.54
        Oil Certificates $1362.21
        AAPL $4322.50
        Physical Gold $12322.50
   
 
    
    
      

      
        Bitcoin $5322.54
        Ethereum $1362.21
        Chainlink $4322.50
        DAI $12322.50

Modal JS:

const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll("[data-close-button]");
const overlay = document.getElementById("overlay");

openModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener("click", () =>{
  const modals = document.querySelectorAll(".modal.active")
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = button.closest(".modal")
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add("active");
  overlay.classList.add("active");
}
function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove("active");
  overlay.classList.remove("active");
}

My attempt at making the table editable JS:

function edit_account(no)
{
 var accountname=document.getElementById("acc"+no);
 var accountbalance=document.getElementById("balance"+no);

 var accountname_data=accname.innerHTML;
 var accountbalance_data=accbalance.innerHTML;

 accname.innerHTML="";    
 accbalance.innerHTML="";
}

function save_account(no)
{
 var name_val=document.getElementById("accname_text"+no).value;
 var balance_val=document.getElementById("accbalance_text"+no).value;

 document.getElementById("acc"+no).innerHTML=name_val;
 document.getElementById("balance"+no).innerHTML=balance_val;
}

function delete_account(no)
{
 document.getElementById("acc"+no+"").outerHTML="";
}

function add_account()
{
 var new_acc=document.getElementById("new_acc").value;
 var new_balance=document.getElementById("new_balance").value;
 
 var list=document.getElementById("acc_list");
 var list_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML=""+new_acc+""+new_balance+"";

 document.getElementById("new_acc").value="";
 document.getElementById("new_balance").value="";
}

Phaelax z · Accepted Answer

ID values should always be unique.

Sorry, when I wrote this I was thinking you were using jquery. Still, it should get you onto the right path.

    $(function () {
    // add click action to your edit buttons
    $('.edit_account').on('click', function(e){
        // get the parent table row
        row = $(e.target).parent().parent();
        
        // get cell data
        c = row.children();
        name = c[0].textContent;
        amount = c[1].textContent;
        
        // populate modal with data from selected table row
        $('#modal_type').val(name);
        $('#modal_price').val(amount);
        
        // pass table row ID to the modal
        $('#row_num').val(row.attr('id'));
        
    });
    
    // On modal save
    $('#save').on('click', function(){
        // get the table row ID that was passed to the modal
        row_id = $('#row_num').val();
        // get the table row to update
        row = $('#'+row_id);
        
        // update the table row's cells with data from the modal fields
        c = row.children();
        $(c[0]).text($('#modal_type').val()); // name
        $(c[1]).text($('#modal_price').val()); // price
    });
    
});

The fields in your modal would be something like this:

Without jquery:

$(function () {
    // add click action to your edit buttons
    $('.edit_account').on('click', function(e){
        // get the parent table row
        row = e.target.parentElement.parentElement;
        
        // get cell data
        c = row.childNodes;
        name = c[0].textContent;
        amount = c[1].textContent;
        
        // populate modal with data from selected table row
        document.getElementById('modal_type').value = name;
        document.getElementById('modal_price').value = amount;
        
        // pass table row ID to the modal
        document.getElementById('row_num').value = row.getAttribute('id');
    });
    
    // On modal save
    document.getElementById('save').addEventListener('click', function(){
        // get the table row ID that was passed to the modal
        //row_id = $('#row_num').val();
        row_id = document.getElementById('row_num').value;
        
        // get the table row to update
        //row = $('#'+row_id);
        row = document.getElementById(row_id);
        
        // update the table row's cells with data from the modal fields
        //c = row.children();
        c = row.childNodes;
        
        c[0].textContent = document.getElementById('modal_type').value;  // name
        c[1].textContent = document.getElementById('modal_price').value; // price
        
    });
    
});

Making table editable in modal

Answers (1)

Related Questions