Javascript 将类分配给 <th> 时，<th> 不显示 CSS 类

Question

我正在使用 Nick Grealy 非常简洁的表格排序器 (Sorting HTML table with JavaScript)，并尝试对其进行修改以显示一个三角形来指示对哪一列进行了排序。我为有问题的

分配了一个类，但三角形没有出现。奇怪的是，如果我为 分配一个 ID，那么我可以让三角形出现，但如果页面上有多个表格，那么多个表格不能包含具有相同 ID 的 ，所以只有一个表格会显示排序三角形。

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
oldTH = document; // Prime the th variable to avoid undefined error
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    oldTH.id = '';
    th.id = 'downArrow';
    th.class = 'downArrow';
    oldTH = th;
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));

table, th, td {
    border: 1px solid black;
    margin-bottom: 12px;
}
th {
    cursor: pointer;
}

#downArrow::after { content: '▼'; color: green; }
.downArrow::after { content: '▼'; color: green; }

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
</table>

【问题讨论】：

• 该属性被称为className 而不是class。 Element.className
• class 是 Javascript 中的保留术语，因此它是 className，而不是 class。 th.className = 'downArrow';

Answer 1

Class 是 JavaScript 中的保留关键字，th.class 是无效语法。使用th.setAttribute('class', 'downArrow') 代替th.class ='downArrow'，这是设置类、src 等属性的主要方式。

Answer 2

您不能使用th.class = ... 添加类。但是，您可以使用th.className = ... 来设置类。

MDN documentation on className property

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
oldTH = document; // Prime the th variable to avoid undefined error
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    oldTH.className = undefined;
    th.className = 'downArrow';
    oldTH = th;
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));

table, th, td {
    border: 1px solid black;
    margin-bottom: 12px;
}
th {
    cursor: pointer;
}

.downArrow::after { content: '▼'; color: green; }

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
</table>