SHARE
TWEET

Untitled

a guest Jul 17th, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         th {
  8.             cursor: pointer;
  9.         }
  10.        
  11.         th:hover {
  12.             background: yellow;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.  
  19.     <table id="grid">
  20.         <thead>
  21.             <tr>
  22.                 <th data-type="number">Возраст</th>
  23.                 <th data-type="string">Имя</th>
  24.             </tr>
  25.         </thead>
  26.         <tbody>
  27.             <tr>
  28.                 <td>5</td>
  29.                 <td>Вася</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>2</td>
  33.                 <td>Петя</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>12</td>
  37.                 <td>Женя</td>
  38.             </tr>
  39.             <tr>
  40.                 <td>9</td>
  41.                 <td>Маша</td>
  42.             </tr>
  43.             <tr>
  44.                 <td>1</td>
  45.                 <td>Илья</td>
  46.             </tr>
  47.         </tbody>
  48.     </table>
  49.  
  50.     <script>
  51.         /* ваш код */
  52.         var grid = document.getElementById('grid');
  53.         let flagNumber = false;
  54.  
  55.         const sortColumn = (colNum, type) => {
  56.             let tdbody = document.querySelector("tbody");
  57.             const rowsArr = tdbody.querySelectorAll("tr");
  58.             let result;
  59.             if (type === "number" && !flagNumber) {
  60.                 result = Array.from(rowsArr).sort((a, b) => {
  61.                     return a.cells[colNum].innerHTML - b.cells[colNum].innerHTML;
  62.                 })
  63.                 flagNumber = !flagNumber;
  64.             } else if (type === "number" && flagNumber) {
  65.                 result = Array.from(rowsArr).sort((a, b) => {
  66.                     return b.cells[colNum].innerHTML - a.cells[colNum].innerHTML
  67.                 })
  68.                 flagNumber = !flagNumber;
  69.             } else if (type === "string") {
  70.                 result = Array.from(rowsArr).sort((a, b) => {
  71.                     return a.cells[colNum].innerHTML > b.cells[colNum].innerHTML;
  72.                 })
  73.             }
  74.             grid.removeChild(tdbody);
  75.             const newTbody = document.createElement("tbody");
  76.             grid.appendChild(newTbody);
  77.             result.forEach(res => newTbody.appendChild(res));
  78.         }
  79.  
  80.         const thead = document.querySelector("thead");
  81.         thead.onclick = (event) => {
  82.             sortColumn(event.target.cellIndex, event.target.dataset.type);
  83.         }
  84.     </script>
  85.  
  86. </body>
  87.  
  88. </htm
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top