从模式弹出窗口中的值更新表行

Question

单击“编辑”按钮时，将显示“ jQuery Modal”弹出窗口，其中包含相应的行值。 当我单击模式弹出窗口中的“提交”按钮时，我希望将弹出窗口中的编辑值显示在该表行中，而无需重新加载页面。

下面是我的表结构。

<table class="expenseTable">
    <tr>
               <th>Date</th> 
               <th>Expense Info</th> 
               <th>Category</th> 
               <th>Amount</th> 
               <th>Edit</th>
               <th>Delete</th>
             </tr>
         <tr id="1soxc">
         <td>26-Mar-2018</td>   
         <td>Cloth</td> 
         <td>Shopping</td>  
         <td>100</td>   
         <td>Edit</td>
         <td>Delete</td>
        </tr>
</table>

我尝试了以下代码。但这不起作用

form = dialog.find('form').on('submit', function (event) {
    event.preventDefault();
    updateExpense();
});



   function updateExpense() {
        let updatedExpense = {
//Values from the modal pop up
            date: $('.udate').val(),
            expenseInfo: $('.uinfo').val(),
            category: $('#ucategory option:selected').text(),
            amount: $('.uamount').val()
        };
        console.log('updating', updatedExpense);
       $(this).parent().find('td:eq(0)').append(updatedExpense.date);