【发布时间】：2020-03-01 20:28:31
【问题描述】：
我有一个表格，其中第一行在每个“td”内的两个“div”内都有内容。其余两行的内容在 'td' 本身。
需要根据“排序”下拉菜单中选择的参数按列对表格进行排序（按升序）。 （“div”中的内容和相应的下拉文本已用颜色编码以便于理解，如下图所示）。
我用 td 本身的内容对第 2 行和第 3 行进行排序的 jquery 如下，工作正常：
var RowtoSort = $(".CompTable tr." + $(this).find("option:selected").text());
RowtoSort.find('td:not(:first)').sort(function(a, b) {
a = $(a).text();
b = $(b).text();
return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
}).each(function(new_Index) {
var original_Index = $(this).index();
Rows.each(function() {
var td = $(this).find('td, th');
if (original_Index !== new_Index)
td.eq(original_Index).insertAfter(td.eq(new_Index));
});
});
但是，当我在第一行使用它来定位每个“td”中的“div”时，它的排序不正确：
var RowtoSort = $(".CompTable tr.Statistics");
**var DivtoSort = $(".CompTable tr.Statistics td:not(:first) div." + $(this).find("option:selected").text());**
DivtoSort.sort(function(a, b) {
a = $(a).text();
b = $(b).text();
return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
}).each(function(new_Index) {
var original_Index = $(this).index();
Rows.each(function() {
var td = $(this).find('td, th');
if (original_Index !== new_Index)
td.eq(original_Index).insertAfter(td.eq(new_Index));
});
});
}
下面是完整的工作代码供参考：
jQuery(document).ready(function($) {
$("#SortBy").on('change', function() {
var Rows = $('.CompTable tr');
if ($(this).find("option:selected").attr("name") == "Statistics") {
var RowtoSort = $(".CompTable tr.Statistics");
var DivtoSort = $(".CompTable tr.Statistics td:not(:first) div." + $(this).find("option:selected").text());
DivtoSort.sort(function(a, b) {
a = $(a).text();
b = $(b).text();
return (a === 'NA') - (b === 'NA') || -(a > b) || +(a < b);
}).each(function(new_Index) {
var original_Index = $(this).index();
Rows.each(function() {
var td = $(this).find('td, th');
if (original_Index !== new_Index)
td.eq(original_Index).insertAfter(td.eq(new_Index));
});
});
} else {
var RowtoSort = $(".CompTable tr." + $(this).find("option:selected").text());
RowtoSort.find('td:not(:first)').sort(function(a, b) {
a = $(a).text();
b = $(b).text();
return (a === 'NA') - (b === 'NA') || -(a > b) || +(a < b);
}).each(function(new_Index) {
var original_Index = $(this).index();
Rows.each(function() {
var td = $(this).find('td, th');
if (original_Index !== new_Index)
td.eq(original_Index).insertAfter(td.eq(new_Index));
});
});
}
});
});.CompTable {
table-layout: fixed;
width: 50%;
position: relative;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 10px;
border: 1px solid #222;
text-align: center;
}
.CompTable td,
table th {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="SortByDiv">
Sort by:
<select id="SortBy">
<option></option>
<option name=Statistics style="color: blue">Statistics1</option>
<option name=Statistics style="color: red">Statistics2</option>
<option name=Parameter1>Parameter1</option>
<option name=Parameter2>Parameter2</option>
</select>
</br>
</br>
</br>
</br>
</br>
<div class="divResult">
<table class="CompTable">
<thead>
<th> </th>
<th>Samsung</th>
<th>Apple</th>
<th>Motorola</th>
</thead>
<tbody>
<tr class="Statistics">
<td>Statistics</td>
<td>
<div style="display:flex; flex-direction: column; width: 100%;">
<div class="Statistics1" style="display:flex; color:blue; width: 100%;">3200</div>
<div class="Statistics2" style="display:flex; color:red; width: 100%;">0</div>
</div>
</td>
<td>
<div style="display:flex; flex-direction: column; width: 100%;">
<div class="Statistics1" style="display:flex; color:blue; width: 100%;">1500</div>
<div class="Statistics2" style="display:flex; color:red; width: 100%;">NA</div>
</div>
</td>
<td>
<div style="display:flex; flex-direction: column; width: 100%;">
<div class="Statistics1" style="display:flex; color:blue; width: 100%;">4100</div>
<div class="Statistics2" style="display:flex; color:red; width: 100%;">1500</div>
</div>
</td>
</tr>
<tr class="Parameter1">
<td>Parameter1</td>
<td>0</td>
<td>NA</td>
<td>7000</td>
</tr>
<tr class="Parameter2">
<td>Parameter2</td>
<td>5000</td>
<td>NA</td>
<td>7000</td>
</tr>
</tbody>
</table>
</div>【问题讨论】：
标签： jquery sorting html-table