我正在尝试按字母顺序对表格进行排序。这基于每行的第2列（标题'标题'下）。在html文件中隔离时，我的代码工作得很好。 Located here...
当我尝试使用动态构建的表时，会出现问题。我将在下面展示代码的重要部分。
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看起来就像我在本文顶部的codepen示例中提供的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（）函数内部...当我在for（）循环中尝试console.log（）时它不起作用，因为变量'rows'的长度只有1，因此任何超过索引的东西1是未知的。
当我在for（）循环之前调用console.log（）'rows'时，它包含所有10个tr标记。我不明白阵列的内容在哪里......有人可以帮我解决这个问题吗？
拜托，谢谢！
答案 0 :(得分：1)
如果您可以删除表格元素并再次添加它们，请尝试以下操作：
const tbody = document.querySelector('#manga-tracker tbody');
const [trhead, ...trs] = [...tbody.children];
trs.sort((tr1, tr2) => tr1.children[1].textContent.localeCompare(tr2.children[1].textContent));
tbody.textContent = '';
[trhead, ...trs].forEach(tr => tbody.appendChild(tr));<div id="manga-tracker-wrapper">
<form action="delete-manga.php" method="POST">
<div id="manga-tracker">
<table>
<tbody>
<tr>
<th> </th>
<th>Title</th>
<th>Released</th>
<th>Owned</th>
<th>Read</th>
<th>Last Updated</th>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="7"></td>
<td><a href="?id=7">Arifureta: From Commonplace to World's Strongest</a></td>
<td>20</td>
<td>1</td>
<td>1</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="6"></td>
<td><a href="?id=6">Akame ga KILL!</a></td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>2018-05-13</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="11"></td>
<td><a href="?id=11">Dragonball Super</a></td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="12"></td>
<td><a href="?id=12">7th Garden</a></td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="13"></td>
<td><a href="?id=13">Attack on Titan</a></td>
<td>25</td>
<td>2</td>
<td>0</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="14"></td>
<td><a href="?id=14">The Ancient Magus' Bride</a></td>
<td>8</td>
<td>7</td>
<td>7</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="15"></td>
<td><a href="?id=15">Beasts of Abigaile</a></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="16"></td>
<td><a href="?id=16">Berserk</a></td>
<td>39</td>
<td>6</td>
<td>6</td>
<td>2018-05-14</td>
</tr>
<tr>
<td><input type="checkbox" name="delete-manga" value="17"></td>
<td><a href="?id=17">Fairy Tale</a></td>
<td>63</td>
<td>1</td>
<td>0</td>
<td>2018-05-14</td>
</tr>
</tbody>
</table>
</div>
</form>
<div id="delete-response">
</div>
</div>
答案 1 :(得分：0)
我尝试了@certainperformances解决方案。虽然它在单独的文件中被隔离时会起作用，但它在我的项目中不起作用。然后我想到了@certainperformances在存储数据而不是元素方面的建议。它击中了我。我可以在将数据输出到表之前对数据进行排序。我只是让事情变得复杂。
function populateMangaTracker() {
var toBeSorted = [];
$('#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 ) {
/* Stored data in an array */
toBeSorted[key] = {
'id': val.id,
'title': val.title,
'total': val.total,
'owned': val.owned,
'read': val.volRead,
'lastUpdated': val.lastUpdated,
'owned': val.owner.charAt(0).toUpperCase() + val.owner.substr(1)
};
});
/* Then sorted alphabetically here */
toBeSorted.sort(sortObject); // sort alphabetically
/* And outputted data to table here */
for(var i = 0; i < toBeSorted.length; i++) {
$('#manga-tracker table').append("<tr><td><input type='checkbox' name='delete-manga' value='"+toBeSorted[i].id+"' /></td><td><a href='?id="+toBeSorted[i].id+"'>"+toBeSorted[i].title+"</a></td><td>"+toBeSorted[i].total+"</td><td>"+toBeSorted[i].owned+"</td><td>"+toBeSorted[i].volRead+"</td><td>"+toBeSorted[i].lastUpdated+"</td><td>"+toBeSorted[i].owner+"</td></tr>");
}
});
}