Я пытаюсь отсортировать таблицу по алфавиту. Это основано на 2-м столбце каждой строки (под заголовком «Заголовок»). Мой код прекрасно работает, когда изолирован в HTML-файл. Находится здесь ...
Проблема возникает, когда я пытаюсь заставить ее работать с динамически созданной таблицей. Я покажу важные части кода ниже.
Функция sortTable ...
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("manga-tracker").getElementsByTagName('table')[0];
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("tr");
/* Loop through all table rows (except the
first, which contains table headers): */
for (var i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("td")[1].getElementsByTagName('a')[0].text;
y = rows[i + 1].getElementsByTagName("td")[1].getElementsByTagName('a')[0].text;
console.log('x: '+x+', y: '+y);
// Check if the two rows should switch place:
if (x.toLowerCase() > y.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
Это то, что создает таблицу путем получения данных с сервера. HTML-код, созданный этой функцией, выглядит точно так же, как и HTML-код, который я предоставил в примере с кодовым элементом в верхней части этого поста.
function populateMangaTracker() {
$('#manga-tracker').html("<table><th> </th><th>Title</th><th>Released</th><th>Owned</th><th>Read</th><th>Last Updated</th><th>Posted By</th></table>");
$.ajax({
method: 'GET',
url: 'populate-mangatracker.php',
});
$.getJSON('populate-mangatracker.php', function(data){
$.each( data, function( key, val ) {
$('#manga-tracker table').append("<tr><td><input type='checkbox' name='delete-manga' value='"+val.id+"' /></td><td><a href='?id="+val.id+"'>"+val.title+"</a></td><td>"+val.total+"</td><td>"+val.owned+"</td><td>"+val.volRead+"</td><td>"+val.lastUpdated+"</td><td>"+ val.owner.charAt(0).toUpperCase() + val.owner.substr(1) +"</td></tr>");
});
// add onclick event to #manga-tracker links
$('#manga-tracker a').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var pathName = $(this).attr('href').split('=');
pathName = pathName[1];
if(pathName >= 0) {
window.location = 'edit-manga.php?id='+pathName;
}
});
});
}
Внутри функции tableSort () ... Когда я пытаюсь использовать console.log () внутри цикла for (), он не работает, потому что переменная 'lines' имеет длину только 1, следовательно, что-либо после индекса 1 неизвестно.
Когда я console.log () 'rows' перед циклом for (), он содержит все 10 тегов tr. Я не понимаю, куда собирается содержимое массива ... Может кто-нибудь помочь мне заставить это работать?
Пожалуйста и спасибо!