jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id=b1>toggle 10 rows</button>
<button id=b2>init sorting</button>

<table id="sorter">
<tbody>
<tr><td>This is row #1</td><td>Another random demo content 8886737</td></tr>
<tr><td>This is row #2</td><td>Another random demo content 9318262</td></tr>
<tr><td>This is row #3</td><td>Another random demo content 7124588</td></tr>
<tr><td>This is row #4</td><td>Another random demo content 2024210</td></tr>
<tr><td>This is row #5</td><td>Another random demo content 4974586</td></tr>
<tr><td>This is row #6</td><td>Another random demo content 9646380</td></tr>
<tr><td>This is row #7</td><td>Another random demo content 8058196</td></tr>
<tr><td>This is row #8</td><td>Another random demo content 8591363</td></tr>
<tr><td>This is row #9</td><td>Another random demo content 4743409</td></tr>
<tr><td>This is row #10</td><td>Another random demo content 2272506</td></tr>
<tr><td>This is row #11</td><td>Another random demo content 9875725</td></tr>
<tr><td>This is row #12</td><td>Another random demo content 1443297</td></tr>
<tr><td>This is row #13</td><td>Another random demo content 4468011</td></tr>
<tr><td>This is row #14</td><td>Another random demo content 2538380</td></tr>
<tr><td>This is row #15</td><td>Another random demo content 8952721</td></tr>
<tr><td>This is row #16</td><td>Another random demo content 3873270</td></tr>
<tr><td>This is row #17</td><td>Another random demo content 6126887</td></tr>
<tr><td>This is row #18</td><td>Another random demo content 7262402</td></tr>
<tr><td>This is row #19</td><td>Another random demo content 4551621</td></tr>
<tr><td>This is row #20</td><td>Another random demo content 5941782</td></tr>
<tr><td>This is row #21</td><td>Another random demo content 7735794</td></tr>
<tr><td>This is row #22</td><td>Another random demo content 5309242</td></tr>
<tr><td>This is row #23</td><td>Another random demo content 2347331</td></tr>
<tr><td>This is row...

CSS

body {
  background: #333;
  color: #888;
  font-family: arial, helvetiva;
}

JavaScript

sorter = $("#sorter tbody")

$("#b1").click(function(){
	//Show or hide rows 11-19
	sorter.find("tr:gt(9):lt(9)").toggle();
})


$("#b2").click(function(){
	//destroy already attached sortable handler
	if (sorter.hasClass("ui-sortable")) sorter.sortable("destroy");
  
  //init jquerui-sortable
  start = performance.now()
	sorter.sortable( {
  	items : "tr",
	 	placeholder: "ui-state-highlight",
	 	axis: "y"
    });
  stop = performance.now()
  
  alert("inittime: " + (stop-start) + " ms");
})