I have a table which is dynamically generated. the table looks like:-
<table id="datatables" class="table table-striped table-no-bordered table-hover"
cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</tfoot>
<tbody>
<tr th:Each="b,iter : ${branches}">
<td th:text="${iter.index}+1"></td>
<td th:text="${b.branchName}"></td>
<td th:text="${b.branchLocation}"></td>
<td th:text="${b.status}"></td>
<td style="text-align: right;">
<button class="btn btn-warning" data-toggle="modal" data-target="#branchModal">Edit</button>
<button class="btn btn-warning">Deactivate</button>
</td>
</tr>
</tbody>
</table>
and i have bootstrap modal. now when i click edit button of the table i want to load the clicked table row data inside the form of modal.
<div class="modal fade" id="branchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="branch-name" class="col-form-label">Branch Name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch-location" class="col-form-label">Branch Location:</label>
<textarea class="form-control" id="branch-location"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button style="margin-right:10px;" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
how can i achieve it ?
note:- i am not using jquery so solution with plain javascript will be appreciated.
If you have a function loadDataOnModal to handle displaying your modal, add this to your edit button:
th:onclick="| loadDataOnModal('${b.branchName}', '${b.branchLocation}')|"
I see you only need branch name & location in your modal body.
Hi simply run this code on the click event that opens your modal for each value you wish to change:
document.getElementById('recipient-name').value = 'Value you wish to set'
You can also access the value of the element you are clicking by passing in the event variable like so:
document.getElementById('clicked').addEventListener('click', event => {
document.getElementById('recipient-name').value = event.target.value
})
This is basic concept you can take it further from there...
Hope this helps
Related
I have created a dynamic table by fetching data from SQL using PHP. each row has an edit button that is linked to modal. I want to pass the value from table to modal so that I can edit it.
I have tried looping trough table row and able to get the values of different columns. However, every time I clicked any edit buttons, only the last of the row is being passed on to the input on modal.
here is my markup:
Modal
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($categories as $category){ ?>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
<?php echo $category['categoryID']; ?>
</td>
<td class="footable-visible" id="tdCategory">
<?php echo $cakeOrdering->escape($category['category']); ?>
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Script
<script type="text/javascript">
$(document).ready(function () {
var table = document.getElementById("main-table");
$('#main-table tr').each(function(i, row){
var $row = $(row);
var category = $row.find('td:nth-child(2)').text().trim();
console.log(category);
$('#category').val(category);
});
});
</script>
This is the output
Output
When I tried to print values into console.
Console.log
To achieve what you require you can hook to the show.bs.modal event. In the event handler you can get a reference to the button which was clicked. You can use that reference to traverse the DOM to find the related td which holds the name of the category. Finally you can set the value of the input in the modal with that category name.
As an aside I would strongly suggest you remove the id attributes from the HTML content you create in the PHP loop as id need to be unique within the DOM. Similarly, remove the inline style attributes as styling should be places within external stylesheets.
With all that said, try this:
$('#modalCategory').on('show.bs.modal', e => {
var $button = $(e.relatedTarget);
$('#category').val($button.closest('td').prev().text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_1
</td>
<td class="footable-visible">
Category 1
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_2
</td>
<td class="footable-visible">
Category 2
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
You are setting value of category in input box inside each loop that's the reason last value is set. Instead you can write click event on edit button so on click of this button get category name and put it inside modal input-box.
Demo code :
$(document).ready(function() {
//on click modal buton
$(".editCategory").on("click", function() {
var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name
$('#category').val(category); //set value
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1
</td>
<td class="footable-visible">
abc
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2
</td>
<td class="footable-visible">
abcd
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
I'm currently using vuejs for my project. And what I need is when I click a row from the table, a modal will show and fill the form out based on the data that is in a clicked row. But, my code is not working for it. Please see my code below.
var app = new Vue({
el: '#roleContainer',
data: {
roles: [
{ display_name: 'user', description: 'user', created_at: '2020/02/20' },
{ display_name: 'mod', description: 'mod', created_at: '2020/02/21' }
],
id: '',
display_name: '',
description: ''
},
methods: {
openEditModal(role){
$('#formModal').modal('show');
console.log(role);
}
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="roleContainer">
<table class="table table-striped with-border">
<thead>
<tr>
<th>Display Name</th>
<th>Description</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr v-for="role in roles" #click="openEditModal" class="pointer">
<td v-text="role.display_name"></td>
<td v-text="role.description"></td>
<td v-text="role.created_at"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="formModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Create Role</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Display Name</label>
<input type="text" name="display_name" v-model="display_name" class="form-control" required>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input type="text" name="description" v-model="description" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" #click="createNewRole">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<tr v-for="role in roles" #click="openEditModal" class="pointer">
<td v-text="role.display_name"></td>
<td v-text="role.description"></td>
<td v-text="role.created_at"></td>
</tr>
here, you should pass the parameter, role. for example,
#click="openEditModal(role)"
and then, in openEditModal function,
this.display_name = role.display_name;
this.description = role.description;
I hope it is helpful for you
When you are using Vue directives, the expressions are evaluated in the context of Vue, so you don't need to wrap things in {}.
#click is just shorthand for v-on:click directive so the same rules apply.
In your case, simply use #click="addToCount(item.contactID)"
Replace your table body with this.
<tbody>
<tr v-for="role in roles" #click="openEditModal(role)" class="pointer">
<td v-text="role.display_name"></td>
<td v-text="role.description"></td>
<td v-text="role.created_at"></td>
</tr>
</tbody>
Hi if anybody can help me to solve this issue, i will grateful because i am trying since 2 days.
I have the one page with list of contracts in the table and one button to open modal window with dynamic data based on the id of the button, but when i am clicking the button its not showing modal window. my HTML code for the contract list is
<table id="MyTable" class="table table-md table-bordered table-hover table-lightfont">
<thead class="thead-light">
<tr>
<th>ID</th>
<th>Customer Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABCD</td>
<td>
<button type="button" name="view" id="1" class="btn btn-light btn-sm shadow-none view_data">
More Details
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>XYZ</td>
<td>
<button type="button" name="view" id="2" class="btn btn-light btn-sm shadow-none view_data">
More Details
</button>
</td>
</tr>
</tbody>
</table>
here is my modal window code
<div id="contractModal" class="modal show fade" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title text-info"><?php echo $module ?></h6>
</div>
<div class="modal-body pt-0">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","BACK"); ?>
</button>
</div>
</div>
</div>
</div>
here is my JavaScript code to open modal window with dynamic data
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var ccpid=$(this).attr("id");
//alert(ccpid);
$.ajax({
url:"showdata.php",
method:"POST",
data:{},
success:function(data){
$('.modal-body').html(data);
$('#contractModal').modal("show");
}
});
});
});
</script>
here is my showdata.php code
<?php
$output='';
$output .="<label>Contract code</label>";
echo $output;
?>
I am a beginner I am using php and javascript. I want to refresh the page view_create_journals.php when I click on the change button in the modal. I add a function to the change button but it's not working. I badly stuck here. Please give me some advice how to solve this problem. Thanks in advance guys. Codes are given below :
view_created_journals.php
<section>
<div class="container">
<div class="panel-group">
<div class="panel panel-info" style="padding: 10px 10px 10px 10px;">
<div class="panel-heading" style="color:black;font-size: 16px;">Plantation Journal Entry Basic Details</div>
<div class="panel-body">
<form method="post">
<div class="table-repsonsive">
<table class="table table-bordered" id="item_table1">
<thead>
<tr>
<th>Journal No.</th>
<th>Range</th>
<th>Beat</th>
<th>Scheme</th>
<th>Year</th>
<th>Status</th>
<th>Change Status</th>
<th>View</th>
</tr>
</thead>
<tbody>
<?php
$query="select * from plantation_journal_basic_details";
$result=mysqli_query($con,$query);
while ($row=mysqli_fetch_assoc($result)) {
$plantation_journal_no=$row['plantation_journal_no'];
$ranges=$row['ranges'];
$beat=$row['beat'];
$scheme=$row['scheme'];
$year=$row['year'];
$status=$row['status'];
echo "<tr>
<th style='font-weight:300'>$plantation_journal_no</th>
<th style='font-weight:300'>$ranges</th>
<th style='font-weight:300'>$beat</th>
<th style='font-weight:300'>$scheme</th>
<th style='font-weight:300'>$year</th>
<th style='font-weight:300'>$status</th>
<th><a name='view' id='view' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#change'>Change Status</a></th>
<th><a href='all_details.php?id=".$row['plantation_journal_no']."' name='view' id='view' class='btn btn-info btn-sm'>View</a></th>
</tr>";
if(isset($_POST['status'])){
$status=$_POST['status'];
$sql1="UPDATE plantation_journal_basic_details SET status='$status' where plantation_journal_no='$plantation_journal_no';";
$res=mysqli_query($con,$sql1);
}
}?>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="change" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Status</h4>
</div>
<div class="modal-body">
<form action="view_created_journals.php" method="post">
<label>Status : </label>
<select name="status" id="status">
<option value="Committed">Committed</option>
<option value="Edit and Submit">Edit and Submit</option>
<option value="Edited and Submitted">Edited and Submitted</option>
<option value="Approved">Approved</option>
</select><br><br>
<button type="submit" class="btn btn-info" onclick="myFunction()" name="submit_change">Change</button>
</form>
<script>
function myFunction() {
location.reload();
}
</script>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Your page should automatically be refreshing when you POST the form. That's default. Specially as it doesn't seem you are using any sort of ajax functions.
Nonetheless, to refresh a page you really need to use JavaScript. PHP runs when you're requesting a page, and javascript is what gives you all the changing elements in your browser.
Once the page is loaded PHP stops, it doesn't do anything new. That's where JS comes in. You can make the page interactive with Javascript.
To reload a page in JS:
window.location.reload();
This will reload the page. More specific in you case:
You have this button:
<button type="submit" class="btn btn-info" name="submit_change">Change</button>
Add this script at the bottom of your script:
<script>
document.querySelector('input[name=submit_change]').addEventListener('click', function(e) {
e.preventDefault();
window.location.reload();
});
</script>
I do have a table. After clicking a row, I would like a popup to appear showing product details. I've tried a controller method with Bootstrap modal window, but that just does not work. Here's the method:
#RequestMapping("/{id}")
public String getNetworkInfo(Model model, #PathVariable String id){
model.addAttribute("poolHashrate", netService.getPoolHashrate(new Long(id)));
return "networkDetails";
}
And a view body:
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
It returns a view that was supposed to be a popup, but I feel like I don't get the idea. No data there. Just a sample popup.
You can use ajax to achieve it
First make the controller return to a jsp page,then use the content of
the jsp page to form a dialog and open it.
Suppose the jsp page for networkDetails is as below,it only include the detail info, if not you can create a jsp page for it:
<div id="networkDetail">
${poolHashrate}
<div>
Then we can put the content of it to the pop up window:
$.ajax({
url:url,
type:"get",
success:function(data){
$("#dialog").html(data);//data is the return page of "networkDetails"
$("#dialog").dialog({//open the dialog
//... other code to init a dialog
});
}
});
I used Jquery to open the modal popup and populate the values in modal popup as well.
Below is modal code:
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">EDIT</h4>
</div>
<div class="modal-body">
<p>
<input type="text" class="input-sm" id="txtfname" />
</p>
<p>
<input type="text" class="input-sm" id="txtlname" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery code: It populates and open the modal - myModal as defined above
<script>
$(document)
.ready(
function () {
$('table tbody tr td')
.on(
'click',
function () {
$("#myModal").modal("show");
$("#txtfname")
.val(
$(this).closest(
'tr')
.children()[0].textContent);
$("#txtlname")
.val(
$(this).closest(
'tr')
.children()[1].textContent);
});
});
</script>
Table code:
<table id="example" class="table table-condensed table-hover table-bordered"
width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$3,120</td>
</tr>
<tr>
<td>Nixon Tiger</td>
<td>System Architect</td>
<td>London</td>
<td>61</td>
<td>$3,120</td>
</tr>
</tbody>
</table>