Javascriptテーブルソート

Question

私はスコットランドの人気のある動物をHTML形式で含むテーブルを用意しており、ユーザーがテーブルを検索できるようにする必要があります。

<table> 
    <tr> 
    <th id = "TableID">AnimalID</th> 
    <th id = "Name">AnimalName</th> 
    <th id = "Category">Category</th> 
    <th id = "BestPlaceToSee">BestPlaceToSee</th> 
    </tr> 

    <tr> 
    <td id = "TableID">1</td> 
    <td id = "Name">Otter</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Freshwater habitats throughout Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">2</td> 
    <td id = "Name">Bluenosed dolphin</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Seen around the coasts of Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">3</td> 
    <td id = "Name">Habour seal</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Along the West Coast, the Hebrides, Orkney and Shetland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">4</td> 
    <td id = "Name">Minke whale</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Waters between Mull and Ardnamurchan</td> 
    </tr> 

    <tr> 
    <td id = "TableID">5</td> 
    <td id = "Name">Pine marten</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Woodland along the West Coast</td> 
    </tr> 

    <tr> 
    <td id = "TableID">6</td> 
    <td id = "Name">Red deer</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Upland forests and moorlands throughout Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">7</td> 
    <td id = "Name">Red squirrel</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Upland forests and moorlands throughout Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">8</td> 
    <td id = "Name">Wildcat</td> 
    <td id = "Category">Mammal</td> 
    <td id = "BestPlaceToSee">Aberdeenshire, Moray and the Highland region</td> 
    </tr> 

    <tr> 
    <td id = "TableID">9</td> 
    <td id = "Name">Osprey</td> 
    <td id = "Category">Bird of prey</td> 
    <td id = "BestPlaceToSee">Highlands and the Borders</td> 
    </tr> 

    <tr> 
    <td id = "TableID">10</td> 
    <td id = "Name">Peregrine falcon</td> 
    <td id = "Category">Bird of prey</td> 
    <td id = "BestPlaceToSee">Throughout Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">11</td> 
    <td id = "Name">Red kite</td> 
    <td id = "Category">Bird of prey</td> 
    <td id = "BestPlaceToSee">Black Isle, the Trossachs and Dumfries and Galloway</td> 
    </tr> 

    <tr> 
    <td id = "TableID">12</td> 
    <td id = "Name">Golden eagle</td> 
    <td id = "Category">Bird of prey</td> 
    <td id = "BestPlaceToSee">Isle of Mull</td> 
    </tr> 

    <tr> 
    <td id = "TableID">13</td> 
    <td id = "Name">Puffin</td> 
    <td id = "Category">Sea bird</td> 
    <td id = "BestPlaceToSee">Around the coasts of Scotland from Galloway to Wick and St Kilda</td> 
    </tr> 

    <tr> 
    <td id = "TableID">14</td> 
    <td id = "Name">Gannet</td> 
    <td id = "Category">Sea bird</td> 
    <td id = "BestPlaceToSee">Bass Rock, Ailsa Craig and St Kilda</td> 
    </tr> 

    <tr> 
    <td id = "TableID">15</td> 
    <td id = "Name">Guilliemot</td> 
    <td id = "Category">Sea bird</td> 
    <td id = "BestPlaceToSee">Orkney, Shetland and Sound of Harris</td> 
    </tr> 

    <tr> 
    <td id = "TableID">16</td> 
    <td id = "Name">Capercaillie</td> 
    <td id = "Category">Inland bird</td> 
    <td id = "BestPlaceToSee">Pinewoods around the Cairngorm mountains</td> 
    </tr> 

    <tr> 
    <td id = "TableID">17</td> 
    <td id = "Name">Chough</td> 
    <td id = "Category">Inland bird</td> 
    <td id = "BestPlaceToSee">Islay</td> 
    </tr> 

    <tr> 
    <td id = "TableID">18</td> 
    <td id = "Name">Ptarmigan</td> 
    <td id = "Category">Inland bird</td> 
    <td id = "BestPlaceToSee">Mountains in Cairngorms, Ben Nevis and Wester Ross </td> 
    </tr> 

    <tr> 
    <td id = "TableID">19</td> 
    <td id = "Name">Red grouse</td> 
    <td id = "Category">Inland bird</td> 
    <td id = "BestPlaceToSee">Heather moorlands throughout Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">20</td> 
    <td id = "Name">Dotterel</td> 
    <td id = "Category">Wading and Ground Nesting Bird</td> 
    <td id = "BestPlaceToSee">High plateaus in the Highlands</td> 
    </tr> 

    <tr> 
    <td id = "TableID">21</td> 
    <td id = "Name">Oystercatcher</td> 
    <td id = "Category">Wading and Ground Nesting Bird</td> 
    <td id = "BestPlaceToSee">Coastal beaches and beside rocky coves</td> 
    </tr> 

    <tr> 
    <td id = "TableID">22</td> 
    <td id = "Name">Red-necked phalarope</td> 
    <td id = "Category">Wading and Ground Nesting Bird</td> 
    <td>Western and Northern Isles of Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">23</td> 
    <td id = "Name">Red-throated diver</td> 
    <td id = "Category">Wading and Ground Nesting Bird</td> 
    <td id = "BestPlaceToSee">Shetland, Orkney, and the Outer Hebrides </td> 
    </tr> 

    <tr> 
    <td id = "TableID">24</td> 
    <td id = "Name">Atlantic salmon</td> 
    <td id = "Category">Fish</td> 
    <td id = "BestPlaceToSee">Freshwater streams and rivers of Scotland</td> 
    </tr> 

    <tr> 
    <td id = "TableID">25</td> 
    <td id = "Name">Basking shark</td> 
    <td id = "Category">Fish</td> 
    <td id = "BestPlaceToSee">Along the West Coast of Scotland</td> 
    </tr> 
</table> 

そして私はまだ、私は私のテーブルをソート後ろJavaScriptを知らない

input type="text" id="search" placeholder="Type to search" 

このタグを使用することを知っています。

Answer 1

テーブルのデータ構造を作成し、テーブルをレンダリングするよりも、必要なアルゴリズムを適用する必要があります。

var animals = [{ 
    id:6,name:'cat' 
},{ 
    id:4,name:'dog' 
},{ 
    id:5,name:'mouse' 
},{ 
    id:6,name:'smurf' 
}] 

var table = document.getElementById('myTable'); 


function renderTable(animals){ 
    table.innerHTML = ''; 
    animals.forEach(function(animal){ 
    table.innerHTML += "<tr><td>"+ 
         animal.id+ 
        "</td><td>"+ 
         animal.name+ 
        "</td></tr> " 
}) 
} 

function sortDesc(){ 

    renderTable( 
    animals.sort(function(a,b){ 
     return a.id<b.id; 
    }) 
) 
} 

function sortAsc(){ 

    renderTable( 
    animals.sort(function(a,b){ 
     return a.id>b.id; 
    }) 
) 
} 

renderTable(animals) 

HTML