Алгоритм сортировки для таблицы

Question

Мне нужен алгоритм сортировки, выполненный в функцию, которая поможет с этой таблицей.

код выглядит следующим образом: https://jsfiddle.net/L2amkyL6/1/

Мне нужно, чтобы получить b1, b2, b3 и b4 порядок. Тем не менее, каждый раз, когда я пытался сортировать, я, похоже, не мог получить «b». Например, если я пишу b10, то это будет выглядеть первым, так как оно только считает b1 в b10. И b9 появится последним, хотя есть b10.

Любом: Я написал подобный код для аналогичной таблицы здесь: http://jsfiddle.net/QZ3t4/540/

function sortData(){ 
    var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0); 
    var rowData = tableData.getElementsByTagName('tr');    
    for(var i = 0; i < rowData.length - 1; i++){ 
    for(var j = 0; j < rowData.length - (i + 1); j++){ 

     var txt = parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML); 
     var numb = txt.match(/\d/g); 
     numb = numb.join(""); 

     var txt2 = parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML); 
     var numb2 = txt2.match(/\d/g); 
     numb2 = numb2.join(""); 
     if(numb > numb2){ 
     tableData.insertBefore(rowData.item(j+1),rowData.item(j)); 
     } 
    } 
    } 
} 
// Table data sorting ends.... 

что с треском провалились.

Мне нужна помощь. Может кто-то помочь мне создать эту функцию. Я буквально только что научился JS за 1 день.

Answer 1

Функция сортировки в настоящее время довольно хрупкая, но вы должны иметь возможность получить эту идею и улучшить ее.

function sortTable(){ 
 
    var parent = document.getElementById("data_table"); 
 
    var rows = Array.from(parent.querySelectorAll("tr")); 
 

 
    rows.sort(function(a,b){ 
 
    var aText = a.children[1].innerText.match(/[a-z]+/i)[0]; 
 
    var aNumber = parseInt(a.children[1].innerText.match(/\d+/g)[0]); 
 
    var bText = b.children[1].innerText.match(/[a-z]+/i)[0]; 
 
    var bNumber = parseInt(b.children[1].innerText.match(/\d+/g)[0]); 
 

 
    if(aText < bText) return -1; 
 
    if(aText > bText) return 1; 
 
    return aNumber - bNumber; 
 
    }); 
 
    
 
    rows.forEach(function(item) { parent.appendChild(item); }); 
 
} 
 

 
document.getElementById("short_data").addEventListener("click", sortTable);

table { margin-bottom: 1em; } 
 
table tr td:first-child { width: 25%; }

<table id="data_table" width="200" border="1"> 
 
    <tr><td>Last</td><td>b10</td></tr> 
 
    <tr><td>01</td><td>b6</td></tr> 
 
    <tr><td>04</td><td>b3</td></tr> 
 
    <tr><td>06</td><td>b1</td></tr> 
 
    <tr><td>02</td><td>b5</td></tr> 
 
    <tr><td>a</td><td>a1</td></tr> 
 
    <tr><td>a</td><td>a10</td></tr> 
 
</table> 
 

 
<button id="short_data">short_data</button>