I've always used jQuery, it's easy there, but I decided to switch to pure JS and ran into difficulties.
When I click on the button, I want the crossOut class to be added to the 3 elements with the appOrd class, and the button itself becomes inactive (the bootstrap class - disabled).
And the second button, Resume, does the opposite.
But nothing works, please tell me what is the problem?
P.S.I suppose there is an error in the const, perhaps it cannot be used like that?
UPD-1. Barmar suggested a typo, corrected it.
UPD-2. It is necessary that the class is added only to the current row of the table.
const hasClass = document.querySelector('.appOrd').classList.contains('crossOut');
document.querySelector('.completeBtn').onclick=function(e) {
e.preventDefault();
if( !hasClass) {
document.querySelector('.appOrd').classList.add('crossOut');
document.querySelector('.resumeBtn').classList.remove('disabled');
this.classList.add('disabled');
}
}
document.querySelector('.resumeBtn').onclick=function(e) {
e.preventDefault();
if(hasClass) {
document.querySelector('.appOrd').classList.remove('crossOut');
document.querySelector('.completeBtn').classList.remove('disabled');
this.classList.add('disabled');
}
}
.crossOut{
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
You need to use querySelectorAll() to select more than one element, and then update the class on all of them. This can be done with .forEach() to loop over them.
Similarly, use querySelectorAll() to add the onclick handler to each of the buttons.
document.querySelectorAll('.completeBtn').forEach(el => el.onclick = function(e) {
e.preventDefault();
let row = this.closest("tr");
row.querySelectorAll('.appOrd').forEach(el => el.classList.add('crossOut'));
row.querySelector('.resumeBtn').classList.remove('disabled');
this.classList.add('disabled');
});
document.querySelectorAll('.resumeBtn').forEach(el => el.onclick = function(e) {
e.preventDefault();
let row = this.closest("tr");
row.querySelectorAll('.appOrd').forEach(el => el.classList.remove('crossOut'));
row.querySelector('.completeBtn').classList.remove('disabled');
this.classList.add('disabled');
});
.crossOut {
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name 2</td>
<td class="appOrd">Phone number 2</td>
<td class="appOrd">2021-02-06 09:00:50</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
I'm not sure this is best approach OR not.
You can query the table rows (tbody tr) and add handlers by querying the Complete and Resume buttons and toggle the classes based clicks. In this way, you can handle the rows(tr) smoothly.
const rows = document.querySelectorAll('tbody tr')
rows.forEach(row => {
const completeBtn = row.querySelector('.completeBtn');
const resumeBtn = row.querySelector('.resumeBtn');
const appOrds = row.querySelectorAll('.appOrd');
completeBtn.addEventListener('click', function(e) {
e.preventDefault();
appOrds.forEach(el => el.classList.add('crossOut'));
resumeBtn.classList.remove('disabled');
this.classList.add('disabled');
})
resumeBtn.addEventListener('click', function(e) {
e.preventDefault();
appOrds.forEach(el => el.classList.remove('crossOut'));
completeBtn.classList.remove('disabled');
this.classList.add('disabled');
})
})
.crossOut{
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
the buttons are for the row that the they are in, so it is better to do it this way
const resume = (src, enable) => {
const tr = src.parentElement.parentElement;
const nameElts = tr.querySelectorAll('.appOrd');
if (enable) {
nameElts.forEach(e => e.classList.remove('crossOut'));
} else {
nameElts.forEach(e => e.classList.add('crossOut'));
}
const completeBtn = tr.querySelector(".completeBtn");
const resumeBtn = tr.querySelector(".resumeBtn");
if (enable) {
completeBtn.classList.remove('disabled');
resumeBtn.classList.add('disabled');
} else {
resumeBtn.classList.remove('disabled');
completeBtn.classList.add('disabled');
}
}
document.querySelectorAll(".completeBtn").forEach(elt => {
elt.onclick = () => {
resume(event.target, false);
}
});
document.querySelectorAll('.resumeBtn').forEach(elt => {
elt.onclick = () => {
resume(event.target, true);
}
});
.crossOut {
text-decoration: line-through;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">Name</th>
<th scope="col">Phone number</th>
<th scope="col">Application time</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td scope="row" class="appOrd">Name</td>
<td class="appOrd">Phone number</td>
<td class="appOrd">2021-02-07 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
<tr class="text-center">
<td scope="row" class="appOrd">Name1</td>
<td class="appOrd">Phone number1</td>
<td class="appOrd">2021-02-08 08:40:48</td>
<td>
<a class="btn btn-success resumeBtn disabled" href="#">Resume</a>
<a class="btn btn-danger completeBtn" href="#">Complete</a>
</td>
</tr>
</tbody>
</table>
Related
I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I want to hide the Update button based on condition. Let's say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:
$(".status-order").each(function() {
const status = $(this).text()
if (status == "Delivered"){
$(".update").hide()
console.log(true)
} else {
$(".update").show()
console.log(false)
}
})
After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it's wrong, can you give me correct answer how to fix this? Thank you.
$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that's in the current table row.
The .status-order you're iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.
$(".status-order").each(function() {
const status = $(this).text();
const update = $(this).next().find('.update');
if (status == "Delivered") {
update.hide()
} else {
update.show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I'm trying the row to be deleted when I click the delete icon in the table using bootstrap table.
My table:
<table id="checkDataTable">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müsteri</th>
<th data-field="ReceiverCompanyName">Alici Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">Islem</th>
</tr>
</thead>
</table>
Javascript:
function StatuFormatter(value, row, index) {
return "<a onclick='removeAssetEconomyCheckBillOfLadingRow()'><i class='fa fa-trash fa-2x' aria-hidden='true'></i></a>";
}
function removeAssetEconomyCheckBillOfLadingRow(id) {
alert(id);
}
It's fine until the removeAssetEconomyCheckBillOfLadingRow function.
How can I delete inside this function?
Please try below:
$(document).on('click', 'button.deleteRow', function(event) {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkDataTable" class="table">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müşteri</th>
<th data-field="ReceiverCompanyName">Alıcı Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">İşlem</th>
</tr>
</thead>
<tobdy>
<tr>
<td>Data1</td>
<td>Data1</td>
<td>Data1</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data2</td>
<td>Data2</td>
<td>Data2</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data3</td>
<td>Data3</td>
<td>Data3</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
</tobdy>
</table>
First of all, you need to set id to to identify the deleting row.
<tr id="1"></tr>
And get tr and remove
function removeAssetEconomyCheckBillOfLadingRow(id) {
$('#checkDataTable').row($('#{{id}}'))).remove().draw();
}
I would like show "No Record(s) Found" if I search something that is not on the table. Can someone show me a javascript code on how can I achieve that? I am not using any plugins cause I am not familiar with those.
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>
This is my HTML file where the table is located...
<script src="__assets/js/jquery-3.5.1.min.js"></script>
<script src="__assets/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
And this is my javascript file. I know I have to put some js but I don't know what I am going to put. Thank you.
So check to see any rows are visible after hiding them
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
$("#noRecordTR").toggle(!$("#myTable tr:visible").length);
});
});
.notfound {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" />
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>
hi there I want to clear the data from a table but just one row and not delete the row. i was looking for some code but I find just delete row
what is the best way to clear the data from a tr and leave the td tittle just clear the Item and Task
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task1</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">task2</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task3</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>
On click find the .parent() of the button, and clear its .siblings() using `.empty()':
$('#table').on('click', '.delete', function() {
$(this).parent('td')
.siblings('.task, .Item') // or remove selectors to clear all siblings
.empty();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>2</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>3</td>
<td data-name="task" class="task" data-type="text">003</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>
If you want to remove the row entirely :
$('#delete').click(function() {
$(this).closest('tr').remove();
});
To remove all content -including th divs- :
$('#delete').click(function() {
$(this).closest('tr').empty();
});
To remove only the content of each cell :
$('#delete').click(function() {
$(this).closest('tr').children().empty();
$(this).closest('tr').css({display: "hidden"});//to visually remove the line (and not have an empty line)
});
$("#table tr:nth-child(n) td").empty();
OR
$("#table tr:nth-child(n) td").html('');
I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>
The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>