I have an HTML as follow :
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>
I have a select all checkbox with id checkAll What I want is that when I click on this checkbox then it should select/deselect all the remaining check box in table
I have used the code :
<script type="text/javascript">
jQuery(document).ready(function (){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
But when I click on selectAll checkbox then it does not select the checkboxes. Please help me what is missing in it ?
If you get jQuery(...).prop not a function error, it means you are using an old version of jQuery (< 1.6). Very old, it is recommended to update the jQuery. Use this code then:
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery("#checkAll").change(function () {
if (this.checked)
jQuery("input:checkbox").attr('checked', "checked");
else
jQuery("input:checkbox").removeAttr('checked');
});
});
</script>
You can use bellow code. I tested it's working fine.
$(document).ready(function(){
$("#checkAll").change(function () {
$("input:checkbox").attr('checked', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>
Related
I have a dynamic table and there is an input field in each row as well as a respective button on every rows. I want to get the respective value of the input field when I click on the respective button. To replicate the scenario, you may refer to the following static code with two rows. Can someone help?
$(".returnItem").click(function(){
var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
var row = $(".newQty").val(); //This is not working also
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
In your example you are using jQuery 1.2.3, which doesn't contains closest function (added since 1.3). Although, you're not looking for function closest, but parents. By this function, you will find parent <tr>, and then by find you will find the input and get his value via val.
Also, since your buttons are inside form, after pressing the button, form will be submitted, so you need to add e.preventDefault() from preventing the form to be sent.
$(".returnItem").click(function(e){
e.preventDefault();
row = $(this).parents("tr").find("input[name='newQty']").val();
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>
You have used type="submit" in button which led to refresh in
jquery fetching data there are many options below given is one of
them.
Use latest version of jquery cdn for using closest and find based functions. https://cdnjs.com/libraries/jquery
$(".returnItem").click(function(){
var row = $(this).parent().prev().prev().children().val();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
</tbody>
</table>
</div>
</form>
I want to update all table rows in a table i have given id to tbody i.e. cartupdate but when i click the update button the rows are not updated. Actually all rows are coming from ajax request but to explain my problem i have taken static row in javascript variable. Please help to sort out my issue.
$(document).on('click', '.update_btn', function(e) {
var test = "<tr><td class='action'><a href='#' id='c9f' class='remove_car'><i class='fa fa-times' aria-hidden='true'></i></a></td><td class='cart_product_desc'> <h5>Product 2</h5> </td><td><span> S </span></td><td class='price'><span>$334</span></td><td class='qty'> <div class='quantity> <input type='number' class='qty-text' id='qty' step='1' min='1' max='1' name='quantity' value=3 disabled> </div> </td> <td class='total_price'><span>1,002</span></td> </tr></tbody><tfoot> <tr> <td><strong>Total</strong></td> <td><strong>Rs 1500</strong></td></tr>";
$("#cartupdate").empty();
$("#cartupdate").html(test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody id="cartupdate">
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />
The problem is because the HTML you're injecting in to #cartupdate contains half of a tbody and half of a tfoot. This is invalid. You have to inject complete elements only. As such your tablelayout is broken.
To fix this amend the HTML you inject to include <tbody> tag at the start and a </tfoot> element at the end. Then you need to remove the existing tbody and tfoot before you append the new HTML to the table. Try this:
$(document).on('click', '.update_btn', function(e) {
var html = '<tbody><tr><td class="action"><i class="fa fa-times" aria-hidden="true"></i></td><td class="cart_product_desc"><h5>Product 2</h5></td><td><span>S </span></td><td class="price"><span>$334</span></td><td class="qty"><div class="quantity"><input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value="3" disabled></div></td><td class="total_price"><span>1,002</span></td></tr></tbody><tfoot><tr><td><strong>Total</strong></td><td><strong>Rs 1500</strong></td></tr>';
var $table = $('table');
$table.find('tbody, tfoot').remove();
$table.append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />
Using jQuery, how can I do the following when clicking the edit icon in the third column:
Change the text in the adjacent second column to an input box
Change the icon class in the third column to a save button
Change the original text in the second column to what was entered into the input box
(Sorry if that's confusing and/or a lot to ask!)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<form>
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody align="left">
<tr>
<th scope="row" id="modalLinkName">Link 1</td>
<td>
<a id="modalLinkURL">https://www.link1.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 2</td>
<td>
<a id="modalLinkURL">https://www.link2.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 3</td>
<td>
<a id="modalLinkURL">https://www.link3.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
First there are a few issues to fix in your HTML:
id attribute values must be unique in HTML. Use class names instead for where you currently have duplicates.
you have <th> opening tags that are closed with </td>
With those changes, you could use this click handler:
$(".modalEditLink").click(function () {
if ($(this).find(".fa-pen").length) { // edit operation:
var $a = $(this).closest("tr").find(".modalLinkURL");
var $inp = $("<input>").addClass("editURL").val($a.text());
$a.replaceWith($inp);
$inp.focus();
$(this).find(".fas").removeClass("fa-pen").addClass("fa-save");
} else { // save operation:
var $inp = $(this).closest("tr").find(".editURL");
var $a = $("<a>").addClass("modalLinkURL").text($inp.val());
$inp.replaceWith($a);
$(this).find(".fas").removeClass("fa-save").addClass("fa-pen");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td scope="row" class="modalLinkName">Link 1</td>
<td>
<a class="modalLinkURL">https://www.link1.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 2</td>
<td>
<a class="modalLinkURL">https://www.link2.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 3</td>
<td>
<a class="modalLinkURL">https://www.link3.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work
You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();
$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you
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>