我有一个表，其中第一行的内容在每个“ td”内的两个“ div”内。其余两行的内容在“ td”本身中。
该表需要按照“排序”下拉列表中选择的参数按列排序（升序）。 （为便于理解，“ div”中的内容和相应的下拉文本已进行了颜色编码，如下图所示。）
我用来对第二行和第三行进行排序的jQuery与td本身的内容如下，这很好：
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'中的'divs'时，它的排序不正确：
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,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>