I am trying to display the below table in an App.
I can't use List or Grid
The purpose of the below code is to allow a user to dynamically add, edit, delete the table data using javascript table.insertRow(table_len).outerHTML
<table id="data_table">
<tr>
<th>Wood</th>
<th>H(ft.)</th>
<th>Th(in.)</th>
<th>Qty.</th>
<th>Action</th>
</tr>
<tr id="row1">
<td id="name_row1">Sesa</td>
<td id="country_row1">12</td>
<td>
<input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row1">
<td><input type="text" id="width_txt">asd</td>
<td><input type="text" id="thick_txt">asd</td>
<td><input type="text" id="qty_txt">asd</td>
<td>
<button class="button icon ion-gear-a" id="edit_button1" value="Edit" onclick="edit_row('1')"></button>
<button class="button icon ion-android-done" id="save_button1" value="Save" class="save" onclick="save_row('1')"></button>
<button class="button icon ion-trash-a" value="Delete" class="delete" onclick="delete_row('1')"></button>
<!-- <input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">-->
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<!--<td class="col col-20"><input type="text" id="wood_name"></td>
<td class="col col-10"><input type="text" id="height_txt"></td>
<td class="col col-10"><input type="text" id="width_txt"></td>
<td class="col col-10"><input type="text" id="thick_txt"></td>
<td class="col col-10"><input type="text" id="qty_txt"></td> -->
<td><button class="button icon ion-android-add-circle" class="add" onclick="add_row();"></button></td>
</tr>
</table>
Related
so for some reason my table comes out wonky and unfinished looking and off place i cant figure out what i did wrong and i am stuck could someone please help me out
problems the script wont let me edit or save anything also random text box next to add row and total is messed up tooenter image description here
<!DOCTYPE html>
<html>
<head>
<script>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var fforder=document.getElementById("fforder_row"+no);
var ffaddress=document.getElementById("ffaddress_row"+no);
var ffstatus=document.getElementById("ffstatus_row"+no);
var ffdate=document.getElementById("ffdate_row"+no);
var fftotal=document.getElementById("fftotal_row"+no);
var fforder_data=fforder.innerHTML;
var ffaddress_data=ffaddress.innerHTML;
var ffstatus_data=ffstatus.innerHTML;
var ffdate_data=ffdate.innerHTML;
var fftotal_data=fftotal.innerHTML;
fforder.innerHTML="<input type='text' id='fforder_text"+no+"' value='"+fforder_data+"'>";
ffaddress.innerHTML="<input type='text' id='ffaddress_text"+no+"' value='"+ffaddress_data+"'>";
ffstatus.innerHTML="<select id='ffstatus_text"+no+"' value='"+ffstatus_data+"'><option value>-select-</option><option value='FF'>Shipped</option><option value='RF'>Delivered</option><option value='PF'>Canceled</option><option value='DF'>Open</option></select>";
ffdate.innerHTML="<input type='date' id='ffdate_text"+no+"' value='"+ffdate_data+"'>";
fftotal.innerHTML="<input type='text' id='fftotal_text"+no+"' value='"+fftotal_data+"'>";
}
function save_row(no)
{
var fforder_val=document.getElementById("fforder_text"+no).value;
var ffaddress_val=document.getElementById("ffaddress_text"+no).value;
var e =document.getElementById("ffstatus_text"+no);
var ffstatus_val=e.options[e.selectedIndex].text;
var ffdate_val=document.getElementById("ffdate_text"+no).value;
var fftotal_val=document.getElementById("fftotal_text"+no).value;
document.getElementById("fforder_row"+no).innerHTML=fforder_val;
document.getElementById("ffaddress_row"+no).innerHTML=ffaddress_val;
document.getElementById("ffstatus_row"+no).innerHTML=ffstatus_val;
document.getElementById("ffdate_row"+no).innerHTML=ffdate_val;
document.getElementById("fftotal_row"+no).innerHTML=fftotal_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_fforder=document.getElementById("new_fforder").value;
var new_ffaddress=document.getElementById("new_ffaddress").value;
var new_ffstatus=document.getElementById("new_ffstatus").value;
var new_ffdate=document.getElementById("new_ffdate").value;
var new_fftotal=document.getElementById("new_fftotal").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='fforder_row"+table_len+"'>"+new_fforder+"</td><td id='ffaddress_row"+table_len+"'>"+new_ffaddress+"</td><td id='ffstatus_row"+table_len+"'>"+new_ffstatus+"</td><td id='ffdate_row"+table_len+"'>"+new_ffdate+"</td><td id='fftotal_row"+table_len+"'>"+new_fftotal+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_fforder").value="";
document.getElementById("new_ffaddress").value="";
document.getElementById("new_ffstatus").value="";
document.getElementById("new_ffdate").value="";
document.getElementById("new_fftotal").value="";
}</script>
</head>
<body>
<h2>Orders</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Order Number</th>
<th>Address</th>
<th>Order Status</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr id="row1">
<td id="fforder_row1">#123333</td>
<td id="ffaddress_row1">38923 Trevors Lane</td>
<td id="ffstatus_row1">Shipped</td>
<td id="ffdate_row1">2020-12-21</td>
<td id="fftotal_row1">10.00</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="fforder_row2">#233442</td>
<td id="ffaddress_row2">39002 Joint Ave</td>
<td id="ffstatus_row2">Delivered</td>
<td id="ffdate_row2">2020-12-21</td>
<td id="fftotal_row2">102.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="fforder_row3">#990202</td>
<td id="ffaddress_row3">29783 Marc Jobs NE</td>
<td id="ffstatus_row3">Open</td>
<td id="ffdate_row3">2020-12-21</td>
<td id="fftotal_row3">1,020.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_fforder"></td>
<td><input type="text" id="new_ffaddress"></td>
<td>
<select name="ffstatus" id="new_ffstatus">
<option value="">-select-</option>
<option value="FF">Shipped</option>
<option value="RF">Delivered</option>
<option value="PF">Canceled</option>
<option value="DF">Open</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
<td><input type="text" id="new_fftotal"></td>
</tr>
</table>
</div>
</body>
</html>
I recommend using the plugin datatable. Because it is flexible and allows basic operations (add, modify, delete rows).
I have a template
<tr ng-repeat="emp in legalDocAssetData">
<td>
<input name="legalAsset_name{{$index}}" ng-model="emp.Name" ng-disabled="!enabledEdit[editCount++]" />
</td>
<td>
<select name="legalAsset_selection{{$index}}" ng-model="emp.Selection__c" ng-options="employe.name as employe.name for employe in borrowerDesignationList" ng-disabled="!enabledEdit[editCount++]"></select>
</td>
<td>
<input name="legalAsset_email{{$index}}" ng-model="emp.Email_Address__c" ng-disabled="!enabledEdit[editCount++]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn" ng-disabled="isReadOnly" ng-click="editEmployee(editCount)"><i class="fa fa-edit"></i></button>
</div>
</td>
</tr>
<tr ng-repeat="emp in achData">
<td>
<input name="ach_name{{$index}}" ng-model="emp.Name" ng-disabled="!enabledEdit[editCount++]" />
</td>
<td>
<select name="ach_selection{{$index}}" ng-model="emp.Selection__c" ng-options="employe.name as employe.name for employe in achList" ng-disabled="!enabledEdit[editCount++]"></select>
</td>
<td>
<input name="ach_email{{$index}}" ng-model="emp.Email_Address__c" ng-disabled="!enabledEdit[editCount++]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn" ng-disabled="isReadOnly" ng-click="editEmployee(editCount)"><i class="fa fa-edit"></i></button>
</div>
</td>
</tr>
And, in controller, I have a variable
$scope.editCount=0
My template is not loading and gives an error
angular.min.js:103 Error: [$parse:syntax]
What is the issue here?
New to ajax and bootstrap modal, I am trying to implement an edit functionality with bootstrap modal. I need the content in DB to be loaded to the modal when user click edit link.I am doing this with ajax and below is how i implemented it however, i am getting the following error on browser:
-script.js:62 Uncaught TypeError: Cannot read property 'on' of undefined
at script.js:62 (anonymous) # script.js:62 (line where my ajax function starts)
Could someone please help. Thanks.
code Snippet:
my JSP: (the edit link to load the modal)
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal" data-target="#editCustomerModal" data-customer-id="${customer.id}">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
</c:forEach>
My Edit Modal:(outside the forEach tag)
<!--Edit Customer Modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Edit Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr>
<td><input type="hidden" id="customerId" path="#" class="form-control" /></td></tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
My script.js:
$(document).on('shown.bs.modal','#editCustomerModal', function () {
var customerId = this.dataset.customerId;
var id = $('#customerId').val(customerId);
//var customerId= $('#customerId').val();
var customerName= $('#customerName').val();
var contactName= $('#contactName').val();
var email= $('#email').val();
var street= $('#street').val();
var zipCode= $('#zipCode').val();
var state= $('#state').val();
var country= $('#country').val();
$.ajax({
type: "post",
url: "/UtilityCertificateWebApplication/edit?id=" + customerId,
cache: false,
contentType:'application/json',
dataType: 'json',
data:"customerName="+ customerName + "&contactName=" + contactName + "&street=" + street +
"&state=" + state + "&zipCode=" + zipCode + "&country=" + country +"&email=" + email ,
success: function(response){
alert("inside edit modal");
var obj = JSON.parse(response);
$('#customerName').val(obj.userName);
$('#contactName').val(obj.userName);
$('#email').val(obj.userName);
$('#street').val(obj.userName);
$('#zipCode').val(obj.userName);
$('#state').val(obj.userName);
$('#country').val(obj.userName);
},
error: function(){
alert('Error while edit request..');
}
});
});
Your issue is in this line:
$("#editCustomerModal_")+$('#customerId').val().on("show.bs.modal", function() {
Change that line to:
$("[id^=editCustomerModal_").on("show.bs.modal", function() {
Now, your issue is getting the source customerid? For this you can write inside your modal show event:
var customerId = this.id.replace('editCustomerModal_', '');
In any case, I'd suggest to use only one modal. This means you need to change this line:
<li><a data-toggle="modal" data-target="#editCustomerModal_${customer.id}">Edit Customer Detail</a></li>
to:
<li><a data-toggle="modal" data-target="#editCustomerModal" data-customer-id="${customer.id}">Edit Customer Detail</a></li>
Now, your issue is: how to get the customer id when the modal shows:
add a listener on anchor click
get the customer id as: this.dataset.customerId
$('[data-target="#editCustomerModal"]').on('click', function(e) {
var customerId = this.dataset.customerId;
$('#customerId').val(customerId);
})
$("#editCustomerModal").on("show.bs.modal", function (e) {
var customerId = $('#customerId').val();
console.log(customerId);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<ul>
<li><a data-toggle="modal" data-customer-id="222" data-target="#editCustomerModal">Edit Customer Detail: 222</a></li>
<li><a data-toggle="modal" data-customer-id="333" data-target="#editCustomerModal">Edit Customer Detail: 333</a></li>
</ul>
<!-- Modal -->
<div id="editCustomerModal" class="modal fade" type="hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Edit Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr>
<td><input type="hidden" id="customerId" path="#" class="form-control" /></td></tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('input[type=number]').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Cart" style="border-color: transparent;" class="table table-hover table-striped well">
<thead class="thead-inverse">
<tr>
<th class="col-lg-1 text-center">Quanity</th>
<th class="col-lg-3 text-center">Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
I have a table with multiple rows and each row has two inputs. Both have different ids. I'm trying to focus on next row's input element by selecting the id when user presses tab key . Here's my code:
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('#quantity').focus();
}
});
While doing this, it selects the wrong textbox on the next row.Any help would be appreciated. thanks
No jQuery required. Just use the tabindex attribute and hook into the browser's native behaviour for applying focus state on tab key presses.
Example:
<table>
<tr>
<td>
<input type="text" tabindex="1">
</td>
</tr>
<tr>
<td>
<input type="text" tabindex="2">
</td>
</tr>
</table>
Recommended for accessibility too.
on an ajax callback, selecting a div inside the calling form works well when the forms is outside a table, and does not work when inside a table. any way to make this work?
Please check out this JSFiddle: http://jsfiddle.net/split19/o0rs1L9z/7/
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<h3>Table:</h3>
<table>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
<form method="POST" action="#" class="fileform">
<tr>
<td class="vert-align"><input type="text" name="name" id="name" /></td>
<td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</form>
</table>
JS:
$(".fileform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
var self = $(this);
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
context: e.target,
success:function(data, textStatus, jqXHR)
{
self.find('.file-success').fadeIn(500);
},
error: function(jqXHR, textStatus, errorThrown)
{
self.find('.file-error').fadeIn(500);
}
});
e.preventDefault();
});
thanks for the comments.
i needed to put the form inside a td and nest a table inside the form.
http://jsfiddle.net/split19/u3xsa9mr/1/
<table>
<tr>
<td class="vert-align">
<form method="POST" action="#" class="fileform">
<table>
<tr>
<td class="vert-align">
<input type="text" name="name" id="name" />
</td>
<td class="vert-align">
<button class="btn btn-primary btn-xs" type="submit">Update</button>
<div class="feedback-icons">
<span class="file-success">checkmark</span>
<span class="file-error">x</span>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>