jQuery气泡在表上排序
[英]Jquery bubble sort on a table
问题描述
我有这张桌子，上面有一排数字。 现在，我想创建一个jQuery函数，会按该表一旦th被点击，我想这样做，使用冒泡排序。 到目前为止，这是我所做的：
var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
for (var j = 0; j < elements_ar.length - i - 1; j++) {
var element = elements_ar[j],
next_element = elements_ar[j + 1],
popularity = $(element).children('td:eq(3)').text(),
next = $(next_element).children('td:eq(3)').text();
if (popularity > next) {
$(element).before(next_element);
}
}
};
现在，这是正常的，但并不完美。 在此完整的工作示例中，您可以看到有些行不在应有的位置：
$("body").on('click', '.ppl_avp', function(event) { var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray(); for (var i = 0; i < elements_ar.length - 1; i++) { for (var j = 0; j < elements_ar.length - i - 1; j++) { var element = elements_ar[j], next_element = elements_ar[j + 1], popularity = $(element).children('td:eq(3)').text(), next = $(next_element).children('td:eq(3)').text(); if (popularity > next) { $(element).before(next_element); } } }; });
table { font-family: Zona; font-size: 23px; margin-top: 100px; border: 1px solid gray; } table>tbody>tr>td { width: 400px !important; cursor: pointer; } table { margin-bottom: 100px; } td { background: #FFFFFF; padding: 15px; text-align: left; border-right: 1px solid #C1C3D1; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } tr:hover td { background: #4E5066; color: #FFFFFF; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; } th, td { text-align: center; width: 170px; } th { padding: 15px; color: white; background: #1b1e24; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" cellpadding="0" class="pl_by_species_table"><tbody><tr><th class="pl_by_sp_th">Id</th> <th class="pl_by_sp_th">Specie</th> <th class="pl_by_sp_th">Number of languages created by species</th> <th class="pl_by_sp_th ppl_avp">Average Popularity</th></tr></tbody><tbody class="languages_row2"><tr class="pl_languages_row2"><td>6</td> <td>Homo Sapiens</td> <td>3</td> <td>802</td></tr> <tr class="pl_languages_row2"><td>32</td> <td>Chrolainee</td> <td>2</td> <td>152</td></tr> <tr class="pl_languages_row2"><td>33</td> <td>Greochovese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>35</td> <td>Eotacenes</td> <td>1</td> <td>157</td></tr> <tr class="pl_languages_row2"><td>36</td> <td>Ochlandinian</td> <td>3</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>37</td> <td>Phibate</td> <td>1</td> <td>191</td></tr> <tr class="pl_languages_row2"><td>39</td> <td>Astrasnern</td> <td>1</td> <td>272</td></tr> <tr class="pl_languages_row2"><td>43</td> <td>Ukohansian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>44</td> <td>Cuhin</td> <td>2</td> <td>153</td></tr> <tr class="pl_languages_row2"><td>45</td> <td>Ninnaine</td> <td>1</td> <td>32</td></tr> <tr class="pl_languages_row2"><td>46</td> <td>Pheopsulian</td> <td>1</td> <td>767</td></tr> <tr class="pl_languages_row2"><td>47</td> <td>Upravvelese</td> <td>1</td> <td>267</td></tr> <tr class="pl_languages_row2"><td>48</td> <td>Aikymdute</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>50</td> <td>Brifeosh</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>52</td> <td>Cridlalian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>53</td> <td>Cujoino</td> <td>2</td> <td>16</td></tr> <tr class="pl_languages_row2"><td>54</td> <td>Ecloileorn</td> <td>1</td> <td>783</td></tr> <tr class="pl_languages_row2"><td>56</td> <td>Eobrycurn</td> <td>3</td> <td>257</td></tr> <tr class="pl_languages_row2"><td>57</td> <td>Istrostino</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>59</td> <td>Jolnensian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>63</td> <td>Nimsish</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>64</td> <td>Eoqarreate</td> <td>3</td> <td>215</td></tr> <tr class="pl_languages_row2"><td>74</td> <td>Tydnaigian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>77</td> <td>Vacreanin</td> <td>2</td> <td>110</td></tr> <tr class="pl_languages_row2"><td>79</td> <td>Fomsoinin</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>84</td> <td>Crainainan</td> <td>1</td> <td>315</td></tr> <tr class="pl_languages_row2"><td>85</td> <td>Drevonee</td> <td>2</td> <td>293</td></tr> <tr class="pl_languages_row2"><td>86</td> <td>Gaitynee</td> <td>1</td> <td>21</td></tr> <tr class="pl_languages_row2"><td>90</td> <td>Coidevian</td> <td>1</td> <td>691</td></tr> <tr class="pl_languages_row2"><td>91</td> <td>Ocheoklote</td> <td>1</td> <td>325</td></tr> <tr class="pl_languages_row2"><td>93</td> <td>Streangones</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>98</td> <td>Kukrur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>99</td> <td>Sleohoigian</td> <td>1</td> <td>749</td></tr> <tr class="pl_languages_row2"><td>100</td> <td>Qyphyvian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>101</td> <td>Seakkanes</td> <td>2</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>104</td> <td>Mevlurn</td> <td>1</td> <td>369</td></tr> <tr class="pl_languages_row2"><td>105</td> <td>Preblen</td> <td>1</td> <td>139</td></tr> <tr class="pl_languages_row2"><td>107</td> <td>Cliclonee</td> <td>3</td> <td>295</td></tr> <tr class="pl_languages_row2"><td>111</td> <td>Sulain</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>113</td> <td>Troivveogian</td> <td>4</td> <td>281</td></tr> <tr class="pl_languages_row2"><td>114</td> <td>Jinesh</td> <td>1</td> <td>13</td></tr> <tr class="pl_languages_row2"><td>116</td> <td>Milsat</td> <td>1</td> <td>115</td></tr> <tr class="pl_languages_row2"><td>119</td> <td>Caintavian</td> <td>4</td> <td>250</td></tr> <tr class="pl_languages_row2"><td>120</td> <td>Sujynan</td> <td>1</td> <td>620</td></tr> <tr class="pl_languages_row2"><td>121</td> <td>Vujote</td> <td>1</td> <td>628</td></tr> <tr class="pl_languages_row2"><td>124</td> <td>Dumdesh</td> <td>1</td> <td>31</td></tr> <tr class="pl_languages_row2"><td>125</td> <td>Boirtanin</td> <td>2</td> <td>249</td></tr> <tr class="pl_languages_row2"><td>127</td> <td>Ucrewose</td> <td>1</td> <td>203</td></tr> <tr class="pl_languages_row2"><td>128</td> <td>Shecaise</td> <td>2</td> <td>645</td></tr> <tr class="pl_languages_row2"><td>129</td> <td>Braintene</td> <td>2</td> <td>351</td></tr> <tr class="pl_languages_row2"><td>131</td> <td>Chrilun</td> <td>1</td> <td>145</td></tr> <tr class="pl_languages_row2"><td>133</td> <td>Klaivnino</td> <td>1</td> <td>653</td></tr> <tr class="pl_languages_row2"><td>135</td> <td>Flyner</td> <td>1</td> <td>493</td></tr> <tr class="pl_languages_row2"><td>136</td> <td>Nimnearn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>138</td> <td>Puwenes</td> <td>1</td> <td>80</td></tr> <tr class="pl_languages_row2"><td>140</td> <td>Icreadluse</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>141</td> <td>Duginin</td> <td>2</td> <td>106</td></tr> <tr class="pl_languages_row2"><td>145</td> <td>Umyfnyvese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>146</td> <td>Recnugian</td> <td>2</td> <td>540</td></tr> <tr class="pl_languages_row2"><td>149</td> <td>Phideolese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>151</td> <td>Ufansteonsian</td> <td>2</td> <td>227</td></tr> <tr class="pl_languages_row2"><td>154</td> <td>Slagrese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>155</td> <td>Oixivneoc</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>157</td> <td>Uchloklase</td> <td>2</td> <td>642</td></tr> <tr class="pl_languages_row2"><td>158</td> <td>Jesnunee</td> <td>1</td> <td>218</td></tr> <tr class="pl_languages_row2"><td>159</td> <td>Omacynin</td> <td>4</td> <td>321</td></tr> <tr class="pl_languages_row2"><td>161</td> <td>Treshtylese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>163</td> <td>Ugriwut</td> <td>2</td> <td>180</td></tr> <tr class="pl_languages_row2"><td>166</td> <td>Zeadlogian</td> <td>1</td> <td>277</td></tr> <tr class="pl_languages_row2"><td>167</td> <td>Ploigneate</td> <td>1</td> <td>235</td></tr> <tr class="pl_languages_row2"><td>168</td> <td>Sepsyrn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>170</td> <td>Rimolese</td> <td>2</td> <td>324</td></tr> <tr class="pl_languages_row2"><td>171</td> <td>Grovnane</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>172</td> <td>Chluphesh</td> <td>2</td> <td>279</td></tr> <tr class="pl_languages_row2"><td>173</td> <td>Oiwybur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>174</td> <td>Blylilian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>175</td> <td>Vlowean</td> <td>6</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>178</td> <td>Walanan</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>181</td> <td>Shutrilian</td> <td>1</td> <td>174</td></tr> <tr class="pl_languages_row2"><td>182</td> <td>Upovnesh</td> <td>2</td> <td>34</td></tr> <tr class="pl_languages_row2"><td>184</td> <td>Qeggose</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>185</td> <td>Stramsenian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>187</td> <td>Eawernenes</td> <td>1</td> <td>150</td></tr> <tr class="pl_languages_row2"><td>188</td> <td>Keslair</td> <td>2</td> <td>265</td></tr> <tr class="pl_languages_row2"><td>191</td> <td>Strobivese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>192</td> <td>Dreolmainee</td> <td>3</td> <td>151</td></tr> <tr class="pl_languages_row2"><td>195</td> <td>Diput</td> <td>1</td> <td>660</td></tr> <tr class="pl_languages_row2"><td>197</td> <td>Ochlislaite</td> <td>2</td> <td>664</td></tr> <tr class="pl_languages_row2"><td>198</td> <td>Bivvir</td> <td>2</td> <td>344</td></tr> <tr class="pl_languages_row2"><td>199</td> <td>Lyglino</td> <td>1</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>200</td> <td>Kejinee</td> <td>2</td> <td>302</td></tr> <tr class="pl_languages_row2"><td>201</td> <td>Vleortunes</td> <td>2</td> <td>314</td></tr> <tr class="pl_languages_row2"><td>202</td> <td>Mulmer</td> <td>4</td> <td>593</td></tr> <tr class="pl_languages_row2"><td>209</td> <td>Judain</td> <td>4</td> <td>675</td></tr> <tr class="pl_languages_row2"><td>210</td> <td>Ubuldugian</td> <td>2</td> <td>271</td></tr> <tr class="pl_languages_row2"><td>211</td> <td>Fripdat</td> <td>1</td> <td>250</td></tr></tbody></table>
要对其进行测试，请单击“平均受欢迎程度”。
2 个解决方案
解决方案1
5 已采纳 2017-12-31 16:09:22
主要问题是您正在使用数组，但是在需要交换时修改DOM。 这意味着数组和DOM不同步。 而是对数组进行排序，然后从该数组更新DOM。
第二个问题是您是按文本而不是数字进行排序。 如果您按文本排序（准确地说是按字典顺序排序，例如，对字符串进行排序），则"10"位于"2"之前，这是您不想要的。 :-)而是强迫文本或将其转换为数字（您可以通过多种方式中的任何一种；在下面，当设置popularity时，我使用一元+ ， next再使用它）。
所以：
// *** Get the table body and remember it as we'll want it later
var tbody = $(this).parent().parent().siblings('tbody');
var elements_ar = tbody.children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
for (var j = 0; j < elements_ar.length - i - 1; j++) {
var element = elements_ar[j],
next_element = elements_ar[j + 1],
popularity = +$(element).children('td:eq(3)').text(),
// Note -----------------^
next = +$(next_element).children('td:eq(3)').text();
// Note -----------^
if (popularity > next) {
// *** Swap them in the array
elements_ar[j] = next_element;
elements_ar[j + 1] = element;
}
}
};
// *** Update the table body
tbody.html(elements_ar);
更新的代码段：
$("body").on('click', '.ppl_avp', function(event) { // *** Get the table body and remember it as we'll want it later var tbody = $(this).parent().parent().siblings('tbody'); var elements_ar = tbody.children('tr').toArray(); for (var i = 0; i < elements_ar.length - 1; i++) { for (var j = 0; j < elements_ar.length - i - 1; j++) { var element = elements_ar[j], next_element = elements_ar[j + 1], popularity = +$(element).children('td:eq(3)').text(), // Note -----------------^ next = +$(next_element).children('td:eq(3)').text(); // Note -----------^ if (popularity > next) { // *** Swap them in the array elements_ar[j] = next_element; elements_ar[j + 1] = element; } } }; // *** Update the table body tbody.html(elements_ar); });
table { font-family: Zona; font-size: 23px; margin-top: 100px; border: 1px solid gray; } table>tbody>tr>td { width: 400px !important; cursor: pointer; } table { margin-bottom: 100px; } td { background: #FFFFFF; padding: 15px; text-align: left; border-right: 1px solid #C1C3D1; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } tr:hover td { background: #4E5066; color: #FFFFFF; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; } th, td { text-align: center; width: 170px; } th { padding: 15px; color: white; background: #1b1e24; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" cellpadding="0" class="pl_by_species_table"><tbody><tr><th class="pl_by_sp_th">Id</th> <th class="pl_by_sp_th">Specie</th> <th class="pl_by_sp_th">Number of languages created by species</th> <th class="pl_by_sp_th ppl_avp">Average Popularity</th></tr></tbody><tbody class="languages_row2"><tr class="pl_languages_row2"><td>6</td> <td>Homo Sapiens</td> <td>3</td> <td>802</td></tr> <tr class="pl_languages_row2"><td>32</td> <td>Chrolainee</td> <td>2</td> <td>152</td></tr> <tr class="pl_languages_row2"><td>33</td> <td>Greochovese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>35</td> <td>Eotacenes</td> <td>1</td> <td>157</td></tr> <tr class="pl_languages_row2"><td>36</td> <td>Ochlandinian</td> <td>3</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>37</td> <td>Phibate</td> <td>1</td> <td>191</td></tr> <tr class="pl_languages_row2"><td>39</td> <td>Astrasnern</td> <td>1</td> <td>272</td></tr> <tr class="pl_languages_row2"><td>43</td> <td>Ukohansian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>44</td> <td>Cuhin</td> <td>2</td> <td>153</td></tr> <tr class="pl_languages_row2"><td>45</td> <td>Ninnaine</td> <td>1</td> <td>32</td></tr> <tr class="pl_languages_row2"><td>46</td> <td>Pheopsulian</td> <td>1</td> <td>767</td></tr> <tr class="pl_languages_row2"><td>47</td> <td>Upravvelese</td> <td>1</td> <td>267</td></tr> <tr class="pl_languages_row2"><td>48</td> <td>Aikymdute</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>50</td> <td>Brifeosh</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>52</td> <td>Cridlalian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>53</td> <td>Cujoino</td> <td>2</td> <td>16</td></tr> <tr class="pl_languages_row2"><td>54</td> <td>Ecloileorn</td> <td>1</td> <td>783</td></tr> <tr class="pl_languages_row2"><td>56</td> <td>Eobrycurn</td> <td>3</td> <td>257</td></tr> <tr class="pl_languages_row2"><td>57</td> <td>Istrostino</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>59</td> <td>Jolnensian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>63</td> <td>Nimsish</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>64</td> <td>Eoqarreate</td> <td>3</td> <td>215</td></tr> <tr class="pl_languages_row2"><td>74</td> <td>Tydnaigian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>77</td> <td>Vacreanin</td> <td>2</td> <td>110</td></tr> <tr class="pl_languages_row2"><td>79</td> <td>Fomsoinin</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>84</td> <td>Crainainan</td> <td>1</td> <td>315</td></tr> <tr class="pl_languages_row2"><td>85</td> <td>Drevonee</td> <td>2</td> <td>293</td></tr> <tr class="pl_languages_row2"><td>86</td> <td>Gaitynee</td> <td>1</td> <td>21</td></tr> <tr class="pl_languages_row2"><td>90</td> <td>Coidevian</td> <td>1</td> <td>691</td></tr> <tr class="pl_languages_row2"><td>91</td> <td>Ocheoklote</td> <td>1</td> <td>325</td></tr> <tr class="pl_languages_row2"><td>93</td> <td>Streangones</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>98</td> <td>Kukrur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>99</td> <td>Sleohoigian</td> <td>1</td> <td>749</td></tr> <tr class="pl_languages_row2"><td>100</td> <td>Qyphyvian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>101</td> <td>Seakkanes</td> <td>2</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>104</td> <td>Mevlurn</td> <td>1</td> <td>369</td></tr> <tr class="pl_languages_row2"><td>105</td> <td>Preblen</td> <td>1</td> <td>139</td></tr> <tr class="pl_languages_row2"><td>107</td> <td>Cliclonee</td> <td>3</td> <td>295</td></tr> <tr class="pl_languages_row2"><td>111</td> <td>Sulain</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>113</td> <td>Troivveogian</td> <td>4</td> <td>281</td></tr> <tr class="pl_languages_row2"><td>114</td> <td>Jinesh</td> <td>1</td> <td>13</td></tr> <tr class="pl_languages_row2"><td>116</td> <td>Milsat</td> <td>1</td> <td>115</td></tr> <tr class="pl_languages_row2"><td>119</td> <td>Caintavian</td> <td>4</td> <td>250</td></tr> <tr class="pl_languages_row2"><td>120</td> <td>Sujynan</td> <td>1</td> <td>620</td></tr> <tr class="pl_languages_row2"><td>121</td> <td>Vujote</td> <td>1</td> <td>628</td></tr> <tr class="pl_languages_row2"><td>124</td> <td>Dumdesh</td> <td>1</td> <td>31</td></tr> <tr class="pl_languages_row2"><td>125</td> <td>Boirtanin</td> <td>2</td> <td>249</td></tr> <tr class="pl_languages_row2"><td>127</td> <td>Ucrewose</td> <td>1</td> <td>203</td></tr> <tr class="pl_languages_row2"><td>128</td> <td>Shecaise</td> <td>2</td> <td>645</td></tr> <tr class="pl_languages_row2"><td>129</td> <td>Braintene</td> <td>2</td> <td>351</td></tr> <tr class="pl_languages_row2"><td>131</td> <td>Chrilun</td> <td>1</td> <td>145</td></tr> <tr class="pl_languages_row2"><td>133</td> <td>Klaivnino</td> <td>1</td> <td>653</td></tr> <tr class="pl_languages_row2"><td>135</td> <td>Flyner</td> <td>1</td> <td>493</td></tr> <tr class="pl_languages_row2"><td>136</td> <td>Nimnearn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>138</td> <td>Puwenes</td> <td>1</td> <td>80</td></tr> <tr class="pl_languages_row2"><td>140</td> <td>Icreadluse</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>141</td> <td>Duginin</td> <td>2</td> <td>106</td></tr> <tr class="pl_languages_row2"><td>145</td> <td>Umyfnyvese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>146</td> <td>Recnugian</td> <td>2</td> <td>540</td></tr> <tr class="pl_languages_row2"><td>149</td> <td>Phideolese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>151</td> <td>Ufansteonsian</td> <td>2</td> <td>227</td></tr> <tr class="pl_languages_row2"><td>154</td> <td>Slagrese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>155</td> <td>Oixivneoc</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>157</td> <td>Uchloklase</td> <td>2</td> <td>642</td></tr> <tr class="pl_languages_row2"><td>158</td> <td>Jesnunee</td> <td>1</td> <td>218</td></tr> <tr class="pl_languages_row2"><td>159</td> <td>Omacynin</td> <td>4</td> <td>321</td></tr> <tr class="pl_languages_row2"><td>161</td> <td>Treshtylese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>163</td> <td>Ugriwut</td> <td>2</td> <td>180</td></tr> <tr class="pl_languages_row2"><td>166</td> <td>Zeadlogian</td> <td>1</td> <td>277</td></tr> <tr class="pl_languages_row2"><td>167</td> <td>Ploigneate</td> <td>1</td> <td>235</td></tr> <tr class="pl_languages_row2"><td>168</td> <td>Sepsyrn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>170</td> <td>Rimolese</td> <td>2</td> <td>324</td></tr> <tr class="pl_languages_row2"><td>171</td> <td>Grovnane</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>172</td> <td>Chluphesh</td> <td>2</td> <td>279</td></tr> <tr class="pl_languages_row2"><td>173</td> <td>Oiwybur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>174</td> <td>Blylilian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>175</td> <td>Vlowean</td> <td>6</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>178</td> <td>Walanan</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>181</td> <td>Shutrilian</td> <td>1</td> <td>174</td></tr> <tr class="pl_languages_row2"><td>182</td> <td>Upovnesh</td> <td>2</td> <td>34</td></tr> <tr class="pl_languages_row2"><td>184</td> <td>Qeggose</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>185</td> <td>Stramsenian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>187</td> <td>Eawernenes</td> <td>1</td> <td>150</td></tr> <tr class="pl_languages_row2"><td>188</td> <td>Keslair</td> <td>2</td> <td>265</td></tr> <tr class="pl_languages_row2"><td>191</td> <td>Strobivese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>192</td> <td>Dreolmainee</td> <td>3</td> <td>151</td></tr> <tr class="pl_languages_row2"><td>195</td> <td>Diput</td> <td>1</td> <td>660</td></tr> <tr class="pl_languages_row2"><td>197</td> <td>Ochlislaite</td> <td>2</td> <td>664</td></tr> <tr class="pl_languages_row2"><td>198</td> <td>Bivvir</td> <td>2</td> <td>344</td></tr> <tr class="pl_languages_row2"><td>199</td> <td>Lyglino</td> <td>1</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>200</td> <td>Kejinee</td> <td>2</td> <td>302</td></tr> <tr class="pl_languages_row2"><td>201</td> <td>Vleortunes</td> <td>2</td> <td>314</td></tr> <tr class="pl_languages_row2"><td>202</td> <td>Mulmer</td> <td>4</td> <td>593</td></tr> <tr class="pl_languages_row2"><td>209</td> <td>Judain</td> <td>4</td> <td>675</td></tr> <tr class="pl_languages_row2"><td>210</td> <td>Ubuldugian</td> <td>2</td> <td>271</td></tr> <tr class="pl_languages_row2"><td>211</td> <td>Fripdat</td> <td>1</td> <td>250</td></tr></tbody></table>
解决方案2
0 2017-12-31 16:24:54
您可以在jQuery集合上使用sort() ，然后在排序后追加整个集合。 仅将以下内容配置为数字排序，但每次单击标题时都将通过检查标题上的切换类而反转
$("body").on('click', '.ppl_avp', function(event) {
var $th = $(this),
$tbody = $th.closest('table').find('tbody.languages_row2'),
$rows = $tbody.children(),
colIdx = $(this).index(),
isAscending = $th.hasClass('ascend');
// only configured for numeric sort
$rows.sort(function(rowA, rowB) {
var valA = $(rowA).find('td').eq(colIdx).text().trim(),
valB = $(rowB).find('td').eq(colIdx).text().trim();
return isAscending ? valB - valA : valA - valB;
});
// append sorted collection
$tbody.append($rows);
$th.toggleClass('ascend')
});
Javascript 冒泡排序排序 Reactjs 中的排名表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.