我想使用jQuery对表进行排序，其中表列intrechange不是行。 我写了一些代码，但问题是它只排序了前10个我不知道的专栏。
这是jQuery代码。
function sort() {
var LEFT_ROWS = 1,
$table = $('table'),
$sorted = $table.find('tbody tr').last().children().slice(LEFT_ROWS);
$sorted = $sorted.sort(function(a, b) {
return parseFloat(a.textContent) - parseFloat(b.textContent);
});
$table.find('tr').each(function() {
var $row = $(this),
$rowContent = $row.children().slice(LEFT_ROWS);
$rowContent.toArray().map(function(t) {
return $sorted.eq($(t).index() - LEFT_ROWS).index() - LEFT_ROWS
}).sort(function(a, b) {
var diff = a - b;
}).forEach(function(i) {
$row.append($rowContent.eq(i));
});
});
}
这是一张桌子。
<table class="table table-bordered text-center">
<thead>
<tr>
<th style="width: 200px;border-top: solid 1px rgba(255, 255, 255, 1);border-left: solid 1px rgba(255, 255, 255, 1);"></th>
<th class="text-center yukiko-blue">Average</th>
<th class="text-center">Baxter CDJR La Vista</th><th class="text-center">Baxter CDJR West Dodge</th><th class="text-center">Baxter Ford West Dodge</th><th class="text-center"> Legends Honda</th><th class="text-center"> Infiniti of Omaha</th><th class="text-center">Legends Toyota</th><th class="text-center"> Lexus of Lincoln</th><th class="text-center"> Lexus of Omaha</th><th class="text-center"> Mercedes-Benz of Omaha</th><th class="text-center">Baxter CDJR Lincoln</th><th class="text-center"> Baxter Ford South</th><th class="text-center">Baxter Toyota La Vista</th><th class="text-center">Baxter Toyota Lincoln</th><th class="text-center">Baxter VW La Vista</th><th class="text-center">Baxter CDJR Bellevue</th><th class="text-center"> Audi Omaha</th><th class="text-center"> Baxter Hyundai</th><th class="text-center"> Baxter Mazda</th><th class="text-center"> Baxter Subaru</th><th class="text-center">Baxter VW Westroads</th> </tr>
</thead>
<tbody>
<tr>
<th scope="row">New Car Total Leads</th>
<td class="yukiko-blue">251</td><td>226</td><td>526</td><td>359</td><td>442</td><td>84</td><td>336</td><td>35</td><td>104</td><td>80</td><td>357</td><td>486</td><td>379</td><td>274</td><td>91</td><td>337</td><td>106</td><td>80</td><td>195</td><td>431</td><td>82</td> </tr>
<tr>
<th scope="row">New Car Dupes</th>
<td class="yukiko-blue">74</td><td>114</td><td>233</td><td>120</td><td>102</td><td>19</td><td>91</td><td>5</td><td>19</td><td>13</td><td>161</td><td>84</td><td>63</td><td>70</td><td>16</td><td>88</td><td>25</td><td>13</td><td>41</td><td>195</td><td>13</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, .125);">New Car Net Leads</th>
<td class="yukiko-blue">176</td><td style="background:rgba(100, 100, 105, .125);">112</td><td style="background:rgba(100, 100, 105, .125);">293</td><td style="background:rgba(100, 100, 105, .125);">239</td><td style="background:rgba(100, 100, 105, .125);">340</td><td style="background:rgba(100, 100, 105, .125);">65</td><td style="background:rgba(100, 100, 105, .125);">245</td><td style="background:rgba(100, 100, 105, .125);">30</td><td style="background:rgba(100, 100, 105, .125);">85</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">196</td><td style="background:rgba(100, 100, 105, .125);">402</td><td style="background:rgba(100, 100, 105, .125);">316</td><td style="background:rgba(100, 100, 105, .125);">204</td><td style="background:rgba(100, 100, 105, .125);">75</td><td style="background:rgba(100, 100, 105, .125);">249</td><td style="background:rgba(100, 100, 105, .125);">81</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">154</td><td style="background:rgba(100, 100, 105, .125);">236</td><td style="background:rgba(100, 100, 105, .125);">69</td> </tr>
<tr>
<th scope="row">Response Time (Avg. Adj.)</th>
<td class="yukiko-blue">1.03</td><td>2.57</td><td>0.75</td><td>1.33</td><td>0.47</td><td>0.77</td><td>0.68</td><td>0.67</td><td>0.27</td><td>1.85</td><td>0.08</td><td>0.25</td><td>2.63</td><td>0.22</td><td>0.48</td><td>0.75</td><td>3.10</td><td>0.33</td><td>0.80</td><td>2.52</td><td>0.12</td> </tr>
<tr>
<th scope="row">NC Appointments Set %</th>
<td class="yukiko-blue">17%</td><td>16%</td><td>21%</td><td>19%</td><td>13%</td><td>8%</td><td>15%</td><td>6%</td><td>24%</td><td>16%</td><td>13%</td><td>15%</td><td>18%</td><td>23%</td><td>31%</td><td>26%</td><td>26%</td><td>14%</td><td>7%</td><td>17%</td><td>13%</td> </tr>
<tr>
<th scope="row">NC Appointments Shown %</th>
<td class="yukiko-blue">65%</td><td>65%</td><td>65%</td><td>54%</td><td>80%</td><td>71%</td><td>68%</td><td>50%</td><td>80%</td><td>77%</td><td>51%</td><td>61%</td><td>68%</td><td>74%</td><td>64%</td><td>59%</td><td>64%</td><td>64%</td><td>54%</td><td>75%</td><td>64%</td> </tr>
<tr>
<th scope="row">New Cars Sold (Delivered)</th>
<td class="yukiko-blue">26</td><td>14</td><td>61</td><td>36</td><td>51</td><td>9</td><td>34</td><td>3</td><td>13</td><td>11</td><td>34</td><td>37</td><td>46</td><td>32</td><td>13</td><td>33</td><td>9</td><td>10</td><td>14</td><td>45</td><td>8</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, .125);">New Cars Sold %</th>
<td class="yukiko-blue">14.55%</td><td style="background:rgba(100, 100, 105, .125);">12.5%</td><td style="background:rgba(100, 100, 105, .125);">20.82%</td><td style="background:rgba(100, 100, 105, .125);">15.06%</td><td style="background:rgba(100, 100, 105, .125);">15%</td><td style="background:rgba(100, 100, 105, .125);">13.85%</td><td style="background:rgba(100, 100, 105, .125);">13.88%</td><td style="background:rgba(100, 100, 105, .125);">10%</td><td style="background:rgba(100, 100, 105, .125);">15.29%</td><td style="background:rgba(100, 100, 105, .125);">16.42%</td><td style="background:rgba(100, 100, 105, .125);">17.35%</td><td style="background:rgba(100, 100, 105, .125);">9.2%</td><td style="background:rgba(100, 100, 105, .125);">14.56%</td><td style="background:rgba(100, 100, 105, .125);">15.69%</td><td style="background:rgba(100, 100, 105, .125);">17.33%</td><td style="background:rgba(100, 100, 105, .125);">13.25%</td><td style="background:rgba(100, 100, 105, .125);">11.11%</td><td style="background:rgba(100, 100, 105, .125);">14.93%</td><td style="background:rgba(100, 100, 105, .125);">9.09%</td><td style="background:rgba(100, 100, 105, .125);">19.07%</td><td style="background:rgba(100, 100, 105, .125);">11.59%</td> </tr>
<tr>
<th scope="row"> </th>
<td class="yukiko-blue"> </td>
<td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td> </tr>
<tr>
<th scope="row">Used Car Total Leads</th>
<td class="yukiko-blue">242</td><td>276</td><td>523</td><td>522</td><td>339</td><td>124</td><td>248</td><td>70</td><td>120</td><td>188</td><td>299</td><td>260</td><td>260</td><td>207</td><td>82</td><td>237</td><td>61</td><td>68</td><td>9</td><td>98</td><td>518</td> </tr>
<tr>
<th scope="row">Used Car Dupes</th>
<td class="yukiko-blue">74</td><td>90</td><td>239</td><td>156</td><td>136</td><td>21</td><td>63</td><td>12</td><td>24</td><td>50</td><td>125</td><td>68</td><td>70</td><td>53</td><td>15</td><td>111</td><td>15</td><td>6</td><td>3</td><td>65</td><td>166</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, .125);">Used Car Net Leads</th>
<td class="yukiko-blue">164</td><td style="background:rgba(100, 100, 105, .125);">186</td><td style="background:rgba(100, 100, 105, .125);">284</td><td style="background:rgba(100, 100, 105, .125);">366</td><td style="background:rgba(100, 100, 105, .125);">203</td><td style="background:rgba(100, 100, 105, .125);">103</td><td style="background:rgba(100, 100, 105, .125);">185</td><td style="background:rgba(100, 100, 105, .125);">58</td><td style="background:rgba(100, 100, 105, .125);">96</td><td style="background:rgba(100, 100, 105, .125);">138</td><td style="background:rgba(100, 100, 105, .125);">174</td><td style="background:rgba(100, 100, 105, .125);">192</td><td style="background:rgba(100, 100, 105, .125);">190</td><td style="background:rgba(100, 100, 105, .125);">154</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">126</td><td style="background:rgba(100, 100, 105, .125);">46</td><td style="background:rgba(100, 100, 105, .125);">62</td><td style="background:rgba(100, 100, 105, .125);">6</td><td style="background:rgba(100, 100, 105, .125);">33</td><td style="background:rgba(100, 100, 105, .125);">352</td> </tr>
<tr>
<th scope="row">Response Time (Avg. Adj.)</th>
<td class="yukiko-blue">0.95</td><td>0.60</td><td>0.37</td><td>0.58</td><td>1.03</td><td>1.00</td><td>0.43</td><td>2.18</td><td>0.47</td><td>0.18</td><td>0.08</td><td>0.25</td><td>0.33</td><td>0.87</td><td>1.37</td><td>1.48</td><td>2.03</td><td>0.12</td><td>0.53</td><td>3.17</td><td>0.22</td> </tr>
<tr>
<th scope="row">UC Appointments Set %</th>
<td class="yukiko-blue">16%</td><td>26%</td><td>14%</td><td>14%</td><td>12%</td><td>21%</td><td>14%</td><td>13%</td><td>17%</td><td>13%</td><td>10%</td><td>20%</td><td>22%</td><td>17%</td><td>27%</td><td>25%</td><td>21%</td><td>1%</td><td>0%</td><td>7%</td><td>13%</td> </tr>
<tr>
<th scope="row">UC Appointments Shown %</th>
<td class="yukiko-blue">60%</td><td>60%</td><td>53%</td><td>40%</td><td>55%</td><td>73%</td><td>74%</td><td>67%</td><td>60%</td><td>67%</td><td>67%</td><td>41%</td><td>60%</td><td>71%</td><td>73%</td><td>47%</td><td>69%</td><td>0%</td><td>0%</td><td>43%</td><td>66%</td> </tr>
<tr>
<th scope="row">Used Cars Sold (Delivered)</th>
<td class="yukiko-blue">21</td><td>23</td><td>24</td><td>25</td><td>20</td><td>22</td><td>21</td><td>7</td><td>11</td><td>10</td><td>21</td><td>21</td><td>24</td><td>20</td><td>13</td><td>16</td><td>3</td><td>0</td><td>1</td><td>3</td><td>29</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, .125);">Used Cars Sold %</th>
<td class="yukiko-blue">12.63%</td><td style="background:rgba(100, 100, 105, .125);">12.37%</td><td style="background:rgba(100, 100, 105, .125);">8.45%</td><td style="background:rgba(100, 100, 105, .125);">6.83%</td><td style="background:rgba(100, 100, 105, .125);">9.85%</td><td style="background:rgba(100, 100, 105, .125);">21.36%</td><td style="background:rgba(100, 100, 105, .125);">11.35%</td><td style="background:rgba(100, 100, 105, .125);">12.07%</td><td style="background:rgba(100, 100, 105, .125);">11.46%</td><td style="background:rgba(100, 100, 105, .125);">7.25%</td><td style="background:rgba(100, 100, 105, .125);">12.07%</td><td style="background:rgba(100, 100, 105, .125);">10.94%</td><td style="background:rgba(100, 100, 105, .125);">12.63%</td><td style="background:rgba(100, 100, 105, .125);">12.99%</td><td style="background:rgba(100, 100, 105, .125);">19.4%</td><td style="background:rgba(100, 100, 105, .125);">12.7%</td><td style="background:rgba(100, 100, 105, .125);">6.52%</td><td style="background:rgba(100, 100, 105, .125);">0%</td><td style="background:rgba(100, 100, 105, .125);">16.67%</td><td style="background:rgba(100, 100, 105, .125);">9.09%</td><td style="background:rgba(100, 100, 105, .125);">8.24%</td> </tr>
<tr>
<th scope="row"> </th>
<td class="yukiko-blue"> </td>
<td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td> </tr>
<tr>
<th scope="row">Total Internet Leads</th>
<td class="yukiko-blue">286</td><td>502</td><td>1049</td><td>881</td><td>781</td><td>208</td><td>584</td><td>105</td><td>224</td><td>268</td><td>656</td><td>746</td><td>639</td><td>481</td><td>173</td><td>574</td><td>167</td><td>148</td><td>204</td><td>529</td><td>600</td> </tr>
<tr>
<th scope="row">Dupes</th>
<td class="yukiko-blue">89</td><td>204</td><td>472</td><td>276</td><td>238</td><td>40</td><td>154</td><td>17</td><td>43</td><td>63</td><td>286</td><td>152</td><td>133</td><td>123</td><td>31</td><td>199</td><td>40</td><td>19</td><td>44</td><td>260</td><td>179</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, .125);">Total Net Leads</th>
<td class="yukiko-blue">218</td><td style="background:rgba(100, 100, 105, .125);">298</td><td style="background:rgba(100, 100, 105, .125);">577</td><td style="background:rgba(100, 100, 105, .125);">605</td><td style="background:rgba(100, 100, 105, .125);">543</td><td style="background:rgba(100, 100, 105, .125);">168</td><td style="background:rgba(100, 100, 105, .125);">430</td><td style="background:rgba(100, 100, 105, .125);">88</td><td style="background:rgba(100, 100, 105, .125);">181</td><td style="background:rgba(100, 100, 105, .125);">205</td><td style="background:rgba(100, 100, 105, .125);">370</td><td style="background:rgba(100, 100, 105, .125);">594</td><td style="background:rgba(100, 100, 105, .125);">506</td><td style="background:rgba(100, 100, 105, .125);">358</td><td style="background:rgba(100, 100, 105, .125);">142</td><td style="background:rgba(100, 100, 105, .125);">375</td><td style="background:rgba(100, 100, 105, .125);">127</td><td style="background:rgba(100, 100, 105, .125);">129</td><td style="background:rgba(100, 100, 105, .125);">160</td><td style="background:rgba(100, 100, 105, .125);">269</td><td style="background:rgba(100, 100, 105, .125);">421</td> </tr>
<tr>
<th scope="row">Response Time (Avg. Adj.)</th>
<td class="yukiko-blue">0.95</td><td>1.37</td><td>0.55</td><td>0.88</td><td>0.68</td><td>0.92</td><td>0.58</td><td>1.67</td><td>0.38</td><td>0.77</td><td>0.08</td><td>0.25</td><td>1.78</td><td>0.48</td><td>0.93</td><td>1.00</td><td>2.72</td><td>0.23</td><td>0.80</td><td>2.62</td><td>0.20</td> </tr>
<tr>
<th scope="row">Appointments Set %</th>
<td class="yukiko-blue">16%</td><td>22%</td><td>17%</td><td>16%</td><td>13%</td><td>16%</td><td>15%</td><td>10%</td><td>20%</td><td>14%</td><td>11%</td><td>16%</td><td>20%</td><td>20%</td><td>29%</td><td>25%</td><td>25%</td><td>8%</td><td>6%</td><td>15%</td><td>13%</td> </tr>
<tr>
<th scope="row">Appointments Shown %</th>
<td class="yukiko-blue">61%</td><td>61%</td><td>61%</td><td>47%</td><td>70%</td><td>73%</td><td>71%</td><td>64%</td><td>71%</td><td>70%</td><td>57%</td><td>53%</td><td>65%</td><td>73%</td><td>68%</td><td>54%</td><td>66%</td><td>58%</td><td>54%</td><td>73%</td><td>66%</td> </tr>
<tr>
<th scope="row">Sold (Delivered)</th>
<td class="yukiko-blue">28</td><td>37</td><td>85</td><td>61</td><td>71</td><td>31</td><td>55</td><td>10</td><td>24</td><td>21</td><td>55</td><td>58</td><td>70</td><td>52</td><td>26</td><td>49</td><td>12</td><td>10</td><td>15</td><td>48</td><td>37</td> </tr>
<tr>
<th scope="row" style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">Total Sold %</th>
<td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.63%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.42%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.73%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">10.08%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.08%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">18.45%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.79%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">11.36%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.26%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">10.24%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.86%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.76%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.83%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.53%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">18.31%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.07%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.45%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">7.75%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.38%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">17.84%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">8.79%</td> </tr>
</tbody>
</table>
为什么这不是对所有表格进行排序这个代码有什么问题 能否请您查看并告诉我。 感谢
答案 0 :(得分：0)
在我看来，您的代码正在尝试单独对每个列进行排序，这会破坏表的完整性，即使列标题仍然存在。例如，那会像这样变成一个表：
Cat Spider Snake Ant Monkey CreatureID 5 1 4 2 3 Legs 4 8 0 6 2 Population 42 500 123 1024 16
进入这个：
Cat Spider Snake Ant Monkey CreatureID 1 2 3 4 5 Legs 0 2 4 6 8 Population 16 42 123 500 1024
显然，上述情况是不正确的，因为（例如），一只猫有四条腿，而不是零。
我猜你真正想做的是按照一个特定列中的值对整个表进行排序，同时保持表的完整性。这可以通过首先转置表，然后按行排序，然后再次转置表来完成。有关该流程的工作示例，请参阅此jsfiddle。
关于小提琴的一些注释：
sortTable函数中的注释。
作为参考，小提琴使用您的原始HTML表格，无需修改。它还使用了这些脚本：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
</head>
这个额外的HTML：
<span>Column Number: </span><input type="text" id="columnNumber" style="width: 42px;">
<input type="button" id="btnSort1" value="Sort by Column" onclick="sortTableByColumnNumber($('table'), $('#columnNumber').val());" />
这段代码：
function sortTableByColumnNumber($table, columnNumber) {
var $table = $('table');
transposeTable($table);
// tinysort($('tr', $table), 'td:nth-of-type(' + columnNumber + ')'); // include "Average" column in sort
tinysort($('tr', $table).slice(2), 'td:nth-of-type(' + columnNumber + ')'); // exclude "Average" column from sort
transposeTable($table);
$('tr:nth-of-type(' + columnNumber + ')').css('background-color', 'lightgreen').css('color', 'black'); // highlight sorted row
}
// source: https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table
function transposeTable($table) {
$table.each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
if(i == 1)
newrows[i].append("<th>" + this.innerHTML + "</th>");
else
newrows[i].append("<td>" + this.innerHTML + "</td>");
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
}
// source: https://stackoverflow.com/questions/7558182/sort-a-table-fast-by-its-first-column-with-javascript-or-jquery
function sortTable(tableId, columnNumber){
var tbl = document.getElementById(tableId).tBodies[0];
var store = [];
for(var i=0, len=tbl.rows.length; i<len; i++){
var row = tbl.rows[i];
// var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
// MOD: specify column number, and sort percentages by numberical value instead of by text value
var sortnr = parseFloat(row.cells[columnNumber].textContent || row.cells[columnNumber].innerText).replace('%', '');
if(!isNaN(sortnr)) store.push([sortnr, row]);
}
store.sort(function(x,y){
return x[0] - y[0];
});
for(var i=0, len=store.length; i<len; i++){
tbl.appendChild(store[i][1]);
}
store = null;
}