I need some assistance with changing the filtering from selection to multiple checkbox selection. Below the code currently filters with one selection only. I would like to be able to select multiple ages and terms in a checkbox form. Thank you for any guidance!
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Filter</title>
</head>
</body>
</html>
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="dropdown-header">Age</th>
<th>Email</th>
<th class="dropdown-header">Gender</th>
<th class="dropdown-header">Term</th>
<th class="dropdown-header">Enrolled</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td data-field-name="age">15</td>
<td>123</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Summer2017</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-field-name="age">16</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2019</td>
</tr>
<tr>
<td>Bobby</td>
<td>Adams</td>
<td data-field-name="age">15</td>
<td>789</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Spring2019</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Sarah</td>
<td>Lee</td>
<td data-field-name="age">15</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
</tbody>
</table>
<script>
(function($) {
$.fn.tableFilterHeaders = function(filterFn) {
this.each((index, header) => {
let $header = $(header),
$table = $header.closest('table'),
text = $header.text(),
colIndex = $header.closest('th').index(),
fieldName = $header.attr('data-field-name') || text.toLowerCase(),
$select = $('<select>')
.data('fieldName', fieldName)
.append($('<option>').text(text).val('').prop('disabled', true))
.append($('<option>').text('All').val('all'))
.append($table.find('tbody tr')
.toArray()
.map(tr => {
return $(tr).find(`td:eq(${colIndex})`).text();
})
.filter(text => text.trim().length > 0)
.sort()
.filter((v, i, a) => a.indexOf(v) === i)
.map(text => {
return $('<option>').text(text).val(text);
}));
$header.empty().append($select.val('').on('change', filterFn));
});
};
$.fn.initRowClasses = function(oddCls, evenCls) {
this.find('tbody tr').each(function(i) {
$(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
});
};
$.fn.updateRowClasses = function(oddCls, evenCls) {
this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
};
})(jQuery);
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
function filterText(e) {
let $filter = $(e.target),
$table = $filter.closest('table'),
$filters = $table.find('.dropdown-header select'),
filterObj = $filters.toArray().reduce((obj, filter) => {
let $filter = $(filter);
return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
}, {});
if ($filter.val() === 'all') {
$filter.val('')
}
$table.find('tbody tr').each(function() {
$(this).toggle($(this).find('td').toArray().every(td => {
let $td = $(td), fieldName = $td.attr('data-field-name');
if (fieldName != null) {
return filterObj[fieldName] === null ||
filterObj[fieldName] === '' ||
filterObj[fieldName] === 'all' ||
filterObj[fieldName] === $td.text();
}
return true;
}));
});
$table.updateRowClasses('odd', 'even');
}
</script>
This is what is currently generating with the code above.
Are you looking for a multiple choice select?
have you tried this?
$select = $('<select>')
.data('fieldName', fieldName)
.attr('multiple')
https://www.w3schools.com/tags/att_select_multiple.asp
PS: If you need to implement this with checkboxes, see this:
How to use Checkbox inside Select Option
Related
I have a 300x11(rowXcolumn) html table that I wanted to filter exactly like Excel or Google Sheets's filter. However, after searching a bit I found out the following code below in a website. This works as I wanted but it has one major problem. It shows same value multiple times. For example in the 2nd column, there are 2 values same "Apple" and 2 whitespaces . In the current code, it displays Apple twice and whitespace twice. However, I want it should show the same values only once. For example, it will show "Apple" only once, and if I select apple it will filter both rows containing apple.
Thank you very much for your help.
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="grid">
<thead>
<tr>
<td index=0>Name
<div class="filter"></div>
</td>
<td index=1>Address
<div class="filter"></div>
</td>
<td index=2>City
<div class="filter"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>second</td>
<td></td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td></td>
<td>SDF hello</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
</tr>
</tbody>
</table>
</body>
</html>
script.js
$(document).ready(function(){
$(".grid thead td").click(function(){
showFilterOption(this);
});
});
var arrayMap = {};
function showFilterOption(tdObject){
var filterGrid = $(tdObject).find(".filter");
if (filterGrid.is(":visible")){
filterGrid.hide();
return;
}
$(".filter").hide();
var index = 0;
filterGrid.empty();
var allSelected = true;
filterGrid.append('<div><input id="all" type="checkbox" checked>Select All</div>');
var $rows = $(tdObject).parents("table").find("tbody tr");
$rows.each(function(ind, ele){
var currentTd = $(ele).children()[$(tdObject).attr("index")];
var div = document.createElement("div");
div.classList.add("grid-item")
var str = $(ele).is(":visible") ? 'checked' : '';
if ($(ele).is(":hidden")){
allSelected = false;
}
div.innerHTML = '<input type="checkbox" '+str+' >'+currentTd.innerHTML;
filterGrid.append(div);
arrayMap[index] = ele;
index++;
});
if (!allSelected){
filterGrid.find("#all").removeAttr("checked");
}
filterGrid.append('<div><input id="close" type="button" value="Close"/><input id="ok" type="button" value="Ok"/></div>');
filterGrid.show();
var $closeBtn = filterGrid.find("#close");
var $okBtn = filterGrid.find("#ok");
var $checkElems = filterGrid.find("input[type='checkbox']");
var $gridItems = filterGrid.find(".grid-item");
var $all = filterGrid.find("#all");
$closeBtn.click(function(){
filterGrid.hide();
return false;
});
$okBtn.click(function(){
filterGrid.find(".grid-item").each(function(ind,ele){
if ($(ele).find("input").is(":checked")){
$(arrayMap[ind]).show();
}else{
$(arrayMap[ind]).hide();
}
});
filterGrid.hide();
return false;
});
$checkElems.click(function(event){
event.stopPropagation();
});
$gridItems.click(function(event){
var chk = $(this).find("input[type='checkbox']");
$(chk).prop("checked",!$(chk).is(":checked"));
});
$all.change(function(){
var chked = $(this).is(":checked");
filterGrid.find(".grid-item [type='checkbox']").prop("checked",chked);
})
filterGrid.click(function(event){
event.stopPropagation();
});
return filterGrid;
}
style.css
table thead tr td{
background-color : gray;
min-width : 100px;
position: relative;
}
.filter{
position:absolute;
border: solid 1px;
top : 20px;
background-color : white;
width:100px;
right:0;
display:none;
}
Maybe someone else will fix that limited JS for you but otherwise use DataTables. It has all you want with extensive documentation, and it's a popular plugin so it's not hard to find any answers to questions you might have about it. Here's an example with everything you desired in your post:
/* Range Search - https://datatables.net/examples/plug-ins/range_filtering.html */
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0;
if (
(isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)
) {
return true;
}
return false;
});
$(document).ready(function() {
/* Init dataTable - Options[paging: off, ordering: off, search input: off] */
var table = $('#table').DataTable({
"paging": false,
"ordering": false,
dom: 'lrt'
});
/* Column Filters */
$(".filterhead").each(function(i) {
if (i != 4 && i != 5) {
var select = $('<select><option value="">Filter</option></select>')
.appendTo($(this).empty())
.on('change', function() {
var term = $(this).val();
table.column(i).search(term, false, false).draw();
});
table.column(i).data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
} else {
$(this).empty();
}
});
/* Range Search -> Input Listener */
$('#min, #max').keyup(function() {
table.draw();
});
});
.container {
max-width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.js"></script>
<body>
<div class="container">
<input type="text" id="min" name="min" placeholder="Min Number">
<input type="text" id="max" name="max" placeholder="Max number">
<table id="table" class="display">
<thead>
<tr>
<th class="filterhead">Name</th>
<th class="filterhead">Address</th>
<th class="filterhead">City</th>
<th class="filterhead">Number</th>
</tr>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
<td>18</td>
</tr>
<tr>
<td>second</td>
<td>as</td>
<td>SDF dfd</td>
<td>50</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
<td>2</td>
</tr>
<tr>
<td>third</td>
<td>as</td>
<td>SDF hello</td>
<td>25</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</body>
I have a table & I want to total of columns data, this is working fine but now I want to reduce JavaScript code how can I do that?
My Code:-
var TotalValue1 = 0;
var currentRow1 = '';
$("tr .loop1").each(function(index, value) {
currentRow1 = parseFloat($(value).text());
TotalValue1 += currentRow1
});
$('.total1').text(TotalValue1);
var TotalValue2 = 0;
var currentRow2 = '';
$("tr .loop2").each(function(index, value) {
currentRow2 = parseFloat($(value).text());
TotalValue2 += currentRow2
});
$('.total2').text(TotalValue2);
var TotalValue3 = 0;
var currentRow3 = '';
$("tr .loop3").each(function(index, value) {
currentRow3 = parseFloat($(value).text());
TotalValue3 += currentRow3
});
$('.total3').text(TotalValue3);
var TotalValue4 = 0;
var currentRow4 = '';
$("tr .loop4").each(function(index, value) {
currentRow4 = parseFloat($(value).text());
TotalValue4 += currentRow4
});
$('.total4').text(TotalValue4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Store</th>
<th>Sale</th>
<th>Revenu</th>
<th>Payout</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td class="loop1">20</td>
<td class="loop2">34</td>
<td class="loop3">65</td>
<td class="loop4">26</td>
</tr>
<tr>
<td>John</td>
<td class="loop1">76</td>
<td class="loop2">93</td>
<td class="loop3">27</td>
<td class="loop4">83</td>
</tr>
<tr class="font-weight-bold">
<td>Total</td>
<td class="total1"></td>
<td class="total2"></td>
<td class="total3"></td>
<td class="total4"></td>
</tr>
</tbody>
</table>
</body>
</html>
ThankYou!
You can:
get the number of columns
loop each column
td:nth-child(col) to get all the TDs for that column
.map to apply your parseFloat on each value
.get() to convert jquery collection to an array
.reduce() to sum them all (see this answer)
Notes:
:nth-child is 1-based, so need to use cols.length rather than usual cols.length - 1
need to loop cols from 2 to skip first column, and using 1-based
added a totals class to the totals TR so that it can be excluded from the totals calculation and so we know where to put the final value. Could also use something like :not(:last-child) or similar.
no need for the loop1 etc classes, but you may have them for other reasons
this assumes your columns are to be totalled and you're not totalling "loop1" values that may be in different columns
Giving:
var cols = $("thead th").length;
for (var c = 2; c <= cols; ++c) {
var total = $("tbody tr:not(.totals) td:nth-child(" + c + ")")
.map((i, e) => parseFloat($(e).text()))
.get()
.reduce((p, c) => p + c, 0)
$("tbody tr.totals td:nth-child(" + c + ")").text(total);
}
.totals > td { font-weight:bold; font-style:italic; border-top:1px solid #CCC; }
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Store</th>
<th>Sale</th>
<th>Revenue</th>
<th>Payout</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td class="loop1">20</td>
<td class="loop2">34</td>
<td class="loop3">65</td>
<td class="loop4">26</td>
</tr>
<tr>
<td>John</td>
<td class="loop1">76</td>
<td class="loop2">93</td>
<td class="loop3">27</td>
<td class="loop4">83</td>
</tr>
<tr class="totals">
<td>Total</td>
<td class="total1"></td>
<td class="total2"></td>
<td class="total3"></td>
<td class="total4"></td>
</tr>
</tbody>
</table>
I need to make a table to select the filters of an array with conditions here for example the beginning of the table for the filters (you cannot select client and user at the same time) :
to do this i create a table with id by cell :
jQuery(document).ready(function($) {
filter = {
date: 0,
client: 0,
user: 0
};
$(".blank_row > td").click(function() {
if (filter['date'] == 0 && $(this).attr('id') == 'date') {
filter[$(this).attr('id')] = 1;
$(this).addClass("bg-success");
}
else if (filter['date'] == 1 && $(this).attr('id') == 'date') {
$(this).removeClass("bg-success");
filter[$(this).attr('id')] = 0;
}
if (filter['client'] == 0 && filter['user'] == 0 && $(this).attr('id') != 'date') {
filter[$(this).attr('id')] = 1;
$(this).addClass("bg-success");
} else if (filter['client'] == 1 || filter['user'] == 1) {
$(this).removeClass("bg-success");
filter[$(this).attr('id')] = 0;
}
console.log($(this).attr('id'));
console.log(filter);
});
});
.blank_row {
height: 50px !important;
}
<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.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<table id="graphTable" class="table table-sm table-bordered">
<thead>
<tr>
<th class="border" colspan="3">FILTER</th>
</tr>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>USER</th>
</tr>
</thead>
<tbody>
<tr class="blank_row">
<td id="date"></td>
<td id="client"></td>
<td id="user"></td>
</tr>
</tbody>
</table>
but if i want to add new cells i would be quickly lost with the code i already made. Do you have any other solution to do what I want more simply?
You can use hasClass method of jquery to see if the tds have required class or not depending on that we can addClass or removeClass from any particular tds.
Demo code :
$(document).ready(function($) {
$(".blank_row > td").click(function() {
//get td closest tr(index)
var rowIndex = $(this).closest("tr").index();
//getting cell no of td which is clicked
var cell = $(this).index();
//looping over the tr
$('tbody > tr:eq(' + rowIndex + ') ').each(function(cellIndex){
var selectors = $(this).find("td:eq(" + cell + ")");
//checking if the clicked td has some classes or not
if (!(selectors.hasClass("bg-success")) && (selectors.hasClass("date"))) {
//add
selectors.addClass("bg-success");
} else if (selectors.hasClass("date") && selectors.hasClass("bg-success")) {
//removed
selectors.removeClass("bg-success");
}
//checking if the client and user has bg-success or not
if (!($(this).find(".client").hasClass('bg-success')) && !($(this).find(".user").hasClass('bg-success')) && !(selectors.hasClass("date"))) {
//add
selectors.addClass("bg-success");
} else if ((($(this).find(".client").hasClass('bg-success')) || ($(this).find(".user").hasClass('bg-success'))) && !(selectors.hasClass("date"))) {
//removed
selectors.removeClass("bg-success");
}
});
});
});
<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.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="graphTable" class="table table-sm table-bordered">
<thead>
<tr>
<th class="border" colspan="3">FILTER</th>
</tr>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>USER</th>
</tr>
</thead>
<tbody>
<tr class="blank_row">
<td class="date">a</td>
<td class="client">b</td>
<td class="user">c</td>
</tr>
<tr class="blank_row">
<td class="date">a1</td>
<td class="client">b1</td>
<td class="user">c1</td>
</tr>
<tr class="blank_row">
<td class="date">a2</td>
<td class="client">b2</td>
<td class="user">c2</td>
</tr>
</tbody>
</table>
I'm trying filtered the contents of a table.
It's ok and working.
But, I have elements with 'display:none' that are hidden on screen and when I'm filter they appear too.
Bellow, I put example the code that I'm working.
How can I filter just visible elements on screen?
Here is the code:
((document => {
const LightTableFilter = ((Arr => {
let _input;
function _onInputEvent(e) {
_input = e.target;
const tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, table => {
Arr.forEach.call(table.tBodies, tbody => {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
const text = row.textContent.toLowerCase();
const val = _input.value.toLowerCase();
row.style.display = !text.includes(val) ? 'none' : 'table-row';
}
return {
init() {
const inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, input => {
input.oninput = _onInputEvent;
});
}
};
}))(Array.prototype);
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
}))(document);
<section class="container">
<h2>es6 Javascript Table Filter</h2>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table class="order-table table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane#vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr style="display: none">
<td>!##!##!qawsed</td>
<td>ewewewewew#batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
</section>
try this
function _filter(row) {
//if (row.style.display === 'none') return; // optional
const text = row.textContent.toLowerCase();
const val = _input.value.toLowerCase();
!text.includes(val) ? row.classList.add('hidden') : row.classList.remove('hidden');
}
css
.hidden {
display: none;
}
I have this table where I am using sumtr for the table footer, and displaying all the data within datatables.
I need to display all the values as currency however.
I cannot change the values post sumtr because it won't be able to calculate the strings.
the Code for the tables here:
<table id="invoice_table">
<thead>
<tr>
<th>Type</th>
<th>Qty</th>
<th>Value</th>
</tr>
</thead>
<tbody>
#foreach (var item1 in Model.Date1)
{
try
{
string par = item1.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Cash</td>
<td class="sum">#Html.DisplayFor(modelItem => item1.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item2 in Model.Date2)
{
try
{
string par = item2.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Cheque</td>
<td class="sum">#Html.DisplayFor(modelItem => item2.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item3 in Model.Date3)
{
try
{
string par = item3.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Online</td>
<td class="sum">#Html.DisplayFor(modelItem => item3.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item4 in Model.Date4)
{
try
{
string par = item4.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>PAP</td>
<td class="sum">#Html.DisplayFor(modelItem => item4.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
</tbody>
<tfoot>
<tr class="summary">
<td>Total:</td>
<td class="first">?</td>
<td class="second">?</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
jQuery(function ($) {
$('#invoice_table').sumtr();
$('#invoice_table .summary').sumtrRatio('.first', '.second');
$('#invoice_table').DataTable({
dom: 'Blfrtip',
buttons: [
'copyHtml5',
'csvHtml5',
]
});
});
</script>
What the table looks like:
Need it to be in proper currency format ("C"): $94,029
How I did it
$('#invoice_table').sumtr({
onComplete: function(e){
e.find('.summary').each(function(index) {
var second = $(this).find('.second').data('sumtr');
$(this).find('.second').html('$' + (second).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
});
}
});