javascript - 当类由 Javascript 分配时不显示 CSS 类

Question

我正在使用 Nick Grealy 非常简洁的表格排序器（使用 JavaScript 对 HTML 表格进行排序），并尝试对其进行修改以显示一个三角形来指示对哪一列进行了排序。我为有问题的 <th> 分配了一个类，但三角形没有出现。奇怪的是，如果我为 分配一个 ID，那么我可以让三角形出现，但如果页面上有多个表格，那么多个表格不能包含具有相同 ID 的 <th>，所以只有一个表格会显示排序三角形。

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>

标签： javascriptcss

Answer 1

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

className关于属性的 MDN 文档

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>