JS表排序失败的铬
我正在一个网站上工作，该网站允许人们参加ERG划船者的在线竞赛。
我显示一个包含等级，姓名和其他字段的大表（600多行），我想允许访问者飞行（客户端JS）。
我设置了一个在Firefox上非常有效的函数，但在Chrome浏览器上根本不起作用。
我真的看不到我的代码中的哪个部分可以带来这个问题，这就是为什么我向您寻求帮助！
我的HTML代码看起来像：
<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>USER 1</td>
<td>...</td>
</tr>
</tbody>
</table>
和我的JavaScript：
for (const table of document.getElementsByTagName('table')) {
const headers = table.querySelectorAll('thead tr th');
for (let i = 0; i < headers.length-1; i++) {
headers[i].addEventListener('click', sortTable(i, table.id));
}
}
function sortTable(n, tableId) {
return () => {
const table = document.getElementById(tableId);
const newTable = document.createElement('table');
newTable.className = table.className;
newTable.id = table.id;
const tbody = document.createElement('tbody');
const thead = document.createElement('thead');
const rows = Array.from(table.rows);
thead.appendChild(rows.shift());
const th = thead.getElementsByTagName('th');
const dir = th[n].className == 'asc' ? 'desc' : 'asc';
rows.sort((a, b) => {
let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();
const compare = x.localeCompare(y, 'fr', { sensitivity: 'base', numeric: true });
return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
})
.forEach(row => tbody.appendChild(row));
for (const header of th) {
header.className = '';
}
th[n].className = dir;
newTable.appendChild(thead);
newTable.appendChild(tbody);
table.parentNode.replaceChild(newTable, table);
};
}
感谢您的帮助！
I am working on a website that allow people to participate in an online race on erg rowers.
I display a large table (600+ rows) containing rank, name and other fields, and I want to allow visitors to sort it on the fly (client-side JS).
I set up a function that works really well on Firefox, but it doesn't work at all on Chrome browsers.
I really don't see what part of my code can bring this problem, this is why I reach to you for some help !
My html code looks like:
<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>USER 1</td>
<td>...</td>
</tr>
</tbody>
</table>
And my JavaScript:
for (const table of document.getElementsByTagName('table')) {
const headers = table.querySelectorAll('thead tr th');
for (let i = 0; i < headers.length-1; i++) {
headers[i].addEventListener('click', sortTable(i, table.id));
}
}
function sortTable(n, tableId) {
return () => {
const table = document.getElementById(tableId);
const newTable = document.createElement('table');
newTable.className = table.className;
newTable.id = table.id;
const tbody = document.createElement('tbody');
const thead = document.createElement('thead');
const rows = Array.from(table.rows);
thead.appendChild(rows.shift());
const th = thead.getElementsByTagName('th');
const dir = th[n].className == 'asc' ? 'desc' : 'asc';
rows.sort((a, b) => {
let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();
const compare = x.localeCompare(y, 'fr', { sensitivity: 'base', numeric: true });
return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
})
.forEach(row => tbody.appendChild(row));
for (const header of th) {
header.className = '';
}
th[n].className = dir;
newTable.appendChild(thead);
newTable.appendChild(tbody);
table.parentNode.replaceChild(newTable, table);
};
}
Thanks for your help !
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的比较函数传递给
.sort（）正在返回布尔值：但是，
.sort（）方法期望此比较功能返回一个数字。我怀疑Firefox正在宽恕或为您做某种类型的转换。如果我将其更改为：... 将按预期进行排序。
（作为参考，这是原始版本，仅返回了布尔值，而排序根本不起作用）：
Your comparison function passed to
.sort()is returning a boolean:However, the
.sort()method expects this comparison function to return a number. I suspect that Firefox is being forgiving or doing some type conversion for you where Chrome is not. If I change it to:...it will sort as expected.
(For reference, here is the original version, where simply a boolean was returned, and the sorting does not work at all):
a.getElementsbytagname（'td'）是一个非常昂贵的操作，在每个比较期间都将其称为慢。表行具有一个
单元格属性，其中包含所有td和th元素，您可以使用它。a.getElementsByTagName('td')is a pretty expensive operation, calling it during every comparison is going to be slow.Table rows have a
cellsproperty that contains all thetdandthelements, you can use that instead.