Как заказать tr на основе значения td в Jquery
Я настраиваю таблицу с данными, которые всегда упорядочивают строки на основе самого высокого значения в td.
Я пытался использовать эту функцию, которая сортирует строки, но затем добавляет новые строки в мою таблицу, поэтому я получаю реплицированные строки.
У меня такая таблица настроена, и мне нужно проверить столбец TOT, который нужно упорядочить по наивысшему баллу.
$(document).ready(function() {
sortTable($('#table'), 'asc');
});
function sortTable(table, order) {
var asc = order === 'asc',
tbody = table.find('tbody');
tbody.find('tr').sort(function(a, b) {
if (asc) {
return $('td:first', a).text().localeCompare($('td:first', b).text());
} else {
return $('td:first', b).text().localeCompare($('td:first', a).text());
}
}).appendTo(tbody);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<table id = "table">
<tr>
<th></th>
<th>POS</th>
<th>TEAM</th>
<th>DRIVER</th>
<th>TOT</th>
</tr>
<tbody>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>85</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>100</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
Ответы 3
Это проблема HTML. Проблема в том, что ваш первый tr не содержится внутри thead или tbody, поэтому он нарушает содержимое table. Чтобы решить проблему, поместите это tr в thead:
$(document).ready(function() {
sortTable($('#table'), 'desc');
});
function sortTable($table, order) {
var asc = order === 'asc',
$tbody = $table.find('tbody');
$tbody.find('tr').sort(function(a, b) {
if (asc) {
return $('td:first', a).text().localeCompare($('td:first', b).text());
} else {
return $('td:first', b).text().localeCompare($('td:first', a).text());
}
}).appendTo($tbody);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<table id = "table">
<thead>
<tr>
<th></th>
<th>POS</th>
<th>TEAM</th>
<th>DRIVER</th>
<th>TOT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>85</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>100</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>Также обратите внимание, что вы сортируете по строковым значениям, которые могут не дать требуемого результата. Возможно, стоит использовать parseInt() для значения td, чтобы повысить надежность сортировки.
Чтобы отсортировать по вашему «TOT», вы должны сортировать по td:last вместо td:first.
После этого вы должны добавить его к table вместо tbody.
$(document).ready(function() {
sortTable($('#table'), 'asc');
});
function sortTable(table, order) {
var asc = order === 'asc',
tbody = table.find('tbody');
tbody.find('tr').sort(function(a, b) {
if (asc) {
return $('td:last', a).text().localeCompare($('td:last', b).text());
} else {
return $('td:last', b).text().localeCompare($('td:last', a).text());
}
}).appendTo(table);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<table id = "table">
<tr>
<th></th>
<th>POS</th>
<th>TEAM</th>
<th>DRIVER</th>
<th>TOT</th>
</tr>
<tbody>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>85</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>100</td>
</tr>
<tr>
<td></td>
<td>1ST</td>
<td>PROSPORT PERFORMANCE (85)</td>
<td>ROBERT RENAUER</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>Вы добавляете отсортированные строки в таблицу (.appendTo(tbody)). Вместо этого вы должны заменить дочерние элементы вашего тела, например, на html.
Ваш первый td каждой строки пуст, поэтому сравнивать и сортировать нечего.
Но ваш может выглядеть так, как показано ниже, чтобы заставить его работать, если первый td заполнен:
function sortTable(table, order) {
var asc = order === 'asc';
var tbody = table.find('tbody');
var sorted = tbody.find('tr').sort(function(a, b) {
console.info(a,b)
if (asc) return $('td:first', a).text().localeCompare($('td:first', b).text());
return $('td:first', b).text().localeCompare($('td:first', a).text());
})
tbody.html(sorted);
}