我圖表的最終目標是按升序顯示價格（例如：10.24 美元、12.44 美元、100.00 美元）。
但是用我的代碼，它把數字 100.00 放在第二位，但我不知道為什么......有人有解決方案嗎？我的代碼在我的JSFIDDLE
function sortTable(table, column, type) {
var order = $(`${table} thead tr>th:eq(' column ')`).data('order');
order = order === 'ASC' ? 'DESC' : 'ASC';
$(`${table} thead tr>th:eq(' column ')`).data('order', order);
$(`${table} tbody tr`).sort(function(a, b) {
a = $(a).find('td:eq(' column ')').text().trim();
b = $(b).find('td:eq(' column ')').text().trim();
switch (type) {
case 'text':
return order === 'ASC' ? a.localeCompare(b) : b.localeCompare(a);
break;
case 'number':
return order === 'ASC' ? a - b : b - a;
break;
case 'date':
var dateFormat = function(dt) {
[m, d, y] = dt.split('/');
return [y, m - 1, d];
}
a = new Date(...dateFormat(a));
b = new Date(...dateFormat(b));
return order === 'ASC' ? a.getTime() - b.getTime() : b.getTime() - a.getTime();
break;
}
}).appendTo(`${table} tbody`);
}
sortTable('#tableBidList', 1, 'text');table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.d-none {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table dataTable">
<thead>
<tr>
<th>
<span data-key-translate="quote.vehicle">Name</span>
</th>
<th>
<span data-key-translate="shaq.price">Price</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td class="purchase-price text-primary font-weight-bolder" price="5 1024" data-price="10.24">
<span class="currency-value" data-eur-value="10.24">10.24</span> <span class="currency-symbol">$</span>
</td>
</tr>
<tr>
<td>B</td>
<td class="purchase-price text-primary font-weight-bolder" price="6 10000" data-price="100.00">
<span class="currency-value" data-eur-value="100.00">100.00</span> <span class="currency-symbol">$</span>
</td>
</tr>
<tr>
<td>C</td>
<td class="purchase-price text-primary font-weight-bolder" price="5 1244" data-price="12.44">
<span class="currency-value" data-eur-value="12.44">12.44</span> <span class="currency-symbol">$</span>
</td>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
提供的代碼中發生了很多事情。相反，我將為您提供替代方案。
我盡我所能將解決方案分解為小功能，并為每個部分添加評論，希望能指導你。
我希望這對你有用。
// We extract a value of type string or number.
const cell = (row, index) => {
let value = row.children[index].innerText || row.children[index].textContent;
value = value.replace('$', '');
return (value === 'number') ? value : value;
}
// We check if its a number
const isNumber = (value) => value !== '' && !isNaN(value);
// We check that both values to compare are numbers
const isComparingNumbers = (v1, v2) => isNumber(v1) && isNumber(v2);
// We compare number vs. number or we compare string vs. string
const comparing = (v1, v2) => {
return isComparingNumbers(v1, v2) ? v1 - v2 : v1.toString().localeCompare(v2)
}
// We create a comparator that will compare based on the order provided at that index
const comparator = (index, order) =>
(left, right) => (comparing)
(cell(order ? left : right, index),
cell(order ? right : left, index));
// With the header selected,
// 1. We obtain a reference to the table
// 2. We obtain a list of references of all the rows except the headers
// 3. We obtain the index by searching for the header
// 4. We perform the sorting of all rows (except the header)
// Also, we invest the flag of the order each time we call this method.
// As we sort, we change the table
const tableSorting = (event) => {
const header = event.currentTarget.header;
const table = header.closest('table');
const rowsExceptHeaders = table.querySelectorAll('tr:nth-child(n 2)');
let index = Array.from(header.parentNode.children).indexOf(header);
Array.from(rowsExceptHeaders)
.sort(comparator(index, this.asc = !this.asc))
.forEach(row => table.appendChild(row) );
};
// The main take care of selecting all the headers.
// For each header, we set that each header should listen for the click event.
// We also pass each header so it can be used by the tableSorting function.
const main = () => {
const headers = document.querySelectorAll('th');
headers.forEach(header => {
header.addEventListener('click', (tableSorting))
header.header = header;
});
}
// We wait for all DOMs be loaded prior running the main method.
$(function() {
main();
let selector = 'table tr th span[data-key-translate="shaq.price"]'
let elem = document.querySelector(selector);
elem.click();
/*
let tables = document.querySelectorAll('.table');
tables.forEach(table => {
let headers = table.querySelectorAll('th');
headers.forEach(column => {
let span = column.querySelector('span');
let title = span.innerHTML;
if (title == 'Price'){
column.click();
}
});
});
*/
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.d-none {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table dataTable">
<tr>
<th>
<span data-key-translate="quote.vehicle">Name</span>
</th>
<th>
<span data-key-translate="shaq.price">Price</span>
</th>
</tr>
<tr>
<td>A</td>
<td class="purchase-price text-primary font-weight-bolder" price="5 1024" data-price="10.24">
<span class="currency-value" data-eur-value="10.24">10.24</span> <span class="currency-symbol">$</span>
</td>
</tr>
<tr>
<td>B</td>
<td class="purchase-price text-primary font-weight-bolder" price="6 10000" data-price="100.00">
<span class="currency-value" data-eur-value="100.00">100.00</span> <span class="currency-symbol">$</span>
</td>
</tr>
<tr>
<td>C</td>
<td class="purchase-price text-primary font-weight-bolder" price="5 1244" data-price="12.44">
<span class="currency-value" data-eur-value="12.44">12.44</span> <span class="currency-symbol">$</span>
</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/461601.html
標籤：javascript html jQuery
上一篇：有沒有辦法在JavaScript的擴展類中的WeakMap中設定奇異值？
下一篇：如何獲取影像src？