【Javascript】TABLEのTD をソートしよう
<html>
<head><title></title>
<script type="text/javascript">
<!--
var oTRs; // TRオブジェクトリスト
var nColId; // ソート対象のカラムID
var sType; // ソート方式（n:数値、s:文字列）
//------------------------------------------------------------
// idで指定されるテーブルの colId番目のカラムをソートする
// typeには n（数値）か s（文字列）のいずれかを指定する
//------------------------------------------------------------
function SortTable(tblID, colID, type, pMODE){
var i, nRow;
var oTABLE, oTBODY;
var nRowIDs = new Array();
// DOMをサポートしていなければ無視
if (!document.getElementById) { return; }
// カラム番号とソート方式を外部変数に覚えておく
nColId = colID;
sType = type;
oTABLE = document.getElementById(tblID);
oTBODY = oTABLE.getElementsByTagName("TBODY")[0];
oTRs = oTBODY.getElementsByTagName("TR");
// 現在の ROW 番号を覚えておく
for (nRow = 0; nRow < oTRs.length; nRow++) {
nRowIDs[nRow] = nRow;
}
// ソートする
nRowIDs.sort(CompareRows);
if(pMODE == "D") nRowIDs.reverse();
// ソートされた順番に移動する。
for (nRow = 0; nRow < oTRs.length; nRow++) {
oTABLE.moveRow(nRowIDs[nRow]+1,oTRs.length);
for(i = nRow + 1; i < oTRs.length; i++){
if(nRowIDs[i] > nRowIDs[nRow]){
nRowIDs[i]--;
}
}
}
}
//------------------------------------------------------------
// テーブルソートのための比較関数
//------------------------------------------------------------
function CompareRows(a, b) {
//var sA = oTRs[a].getElementsByTagName("*")[nColId].firstChild.nodeValue;
//var sB = oTRs[b].getElementsByTagName("*")[nColId].firstChild.nodeValue;
var sA = oTRs[a].getElementsByTagName("td")[nColId].innerText;
var sB = oTRs[b].getElementsByTagName("td")[nColId].innerText;
if (sType == "n") {
if(sA == "") sA = "0";
if(sB == "") sB = "0";
sA = eval(sA);
sB = eval(sB);
}
if (sType == "d"){
if(sA == "") sA = "100/1/1";
if(sB == "") sB = "100/1/1";
sA = new Date(sA);
sB = new Date(sB);
}
if (sA == sB) {
return 0;
} else if (sA > sB) {
return 1;
} else {
return -1;
}
}
//------------------------------------------------------------
// テーブルの行選択
//------------------------------------------------------------
var preSEL_TR
function fncSEL_TR(pTR){
if(preSEL_TR != null) preSEL_TR.style.backgroundColor = "white";
pTR.style.backgroundColor = "yellow";
preSEL_TR = pTR;
}
//-->
</script>
</head>
<body>
<table border=1 id="tb1">
<thead>
<tr>
<th>SEQ <button onclick="SortTable('tb1', 0, 'n','A')">▲</button><button onclick="SortTable('tb1', 0, 'n','D')">▼</button></th>
<th>名前<button onclick="SortTable('tb1', 1, 's','A')">▲</button><button onclick="SortTable('tb1', 1, 's','D')">▼</button></th>
<th>電話番号<button onclick="SortTable('tb1', 2, 's','A')">▲</button><button onclick="SortTable('tb1', 2, 's','D')">▼</button></th>
<th>記念日<button onclick="SortTable('tb1', 3, 'd','A')">▲</button><button onclick="SortTable('tb1', 3, 'd','D')">▼</button></th>
<th>年齢<button onclick="SortTable('tb1', 4, 'n','A')">▲</button><button onclick="SortTable('tb1', 4, 'n','D')">▼</button></th>
</tr>
</thead>
<tbody>
<tr onclick="fncSEL_TR(this)"><td>1</td><td>Agatha</td><td>20-633-483</td><td>2005/04/28</td><td>46</td></tr>
<tr onclick="fncSEL_TR(this)"><td>2</td><td>Agnes</td><td>28-492-566</td><td>2005/04/28</td><td>99</td></tr>
<tr onclick="fncSEL_TR(this)"><td>3</td><td>Aileen</td><td>4-829-679</td><td>2005/04/28</td><td>64</td></tr>
<tr onclick="fncSEL_TR(this)"><td>4</td><td>Alice</td><td>78-710-373</td><td>2005/04/28</td><td>45</td></tr>
<tr onclick="fncSEL_TR(this)"><td>5</td><td>Amy</td><td>16-876-228</td><td>2005/04/28</td><td>89</td></tr>
<tr onclick="fncSEL_TR(this)"><td>6</td><td>Angela</td><td>92-463-202</td><td>2005/04/28</td><td>79</td></tr>
<tr onclick="fncSEL_TR(this)"><td>7</td><td>Beatrice</td><td>15-992-427</td><td>2005/04/28</td><td>6</td></tr>
<tr onclick="fncSEL_TR(this)"><td>8</td><td>Bridget</td><td>94-535-674</td><td>2005/04/28</td><td>71</td></tr>
<tr onclick="fncSEL_TR(this)"><td>9</td><td>Catherine</td><td>22-643-845</td><td>2005/04/28</td><td>11</td></tr>
<tr onclick="fncSEL_TR(this)"><td>10</td><td>Cordelia</td><td>81-453-903</td><td>2005/04/28</td><td>9</td></tr>
<tr onclick="fncSEL_TR(this)"><td>11</td><td>Dorothy</td><td>64-347-812</td><td>2005/04/28</td><td>20</td></tr>
<tr onclick="fncSEL_TR(this)"><td>12</td><td>Edith</td><td>87-383-88</td><td>2005/04/28</td><td>19</td></tr>
<tr onclick="fncSEL_TR(this)"><td>13</td><td>Elizabethe</td><td>55-91-301</td><td>2007/04/06</td><td>16</td></tr>
<tr onclick="fncSEL_TR(this)"><td>14</td><td>Emery</td><td>90-509-36</td><td>2005/04/28</td><td>46</td></tr>
<tr onclick="fncSEL_TR(this)"><td>15</td><td>Emma</td><td>38-271-522</td><td>2005/04/28</td><td>28</td></tr>
<tr onclick="fncSEL_TR(this)"><td>16</td><td>Esther</td><td>25-199-342</td><td>2005/04/28</td><td>64</td></tr>
<tr onclick="fncSEL_TR(this)"><td>17</td><td>Florence</td><td>16-454-370</td><td>2005/04/28</td><td>63</td></tr>
<tr onclick="fncSEL_TR(this)"><td>18</td><td>Frances</td><td>18-418-175</td><td>2005/04/28</td><td>99</td></tr>
<tr onclick="fncSEL_TR(this)"><td>19</td><td>Gertrude</td><td>38-455-603</td><td>2005/04/28</td><td>68</td></tr>
<tr onclick="fncSEL_TR(this)"><td>20</td><td>Helen</td><td>15-124-277</td><td>2007/04/06</td><td>79</td></tr>
<tr onclick="fncSEL_TR(this)"><td>21</td><td>Irene</td><td>14-184-141</td><td>2005/01/19</td><td>22</td></tr>
<tr onclick="fncSEL_TR(this)"><td>22</td><td>Issabel</td><td>57-664-568</td><td>2005/04/28</td><td>22</td></tr>
<tr onclick="fncSEL_TR(this)"><td>23</td><td>Judith</td><td>14-733-308</td><td>2005/10/31</td><td>66</td></tr>
<tr onclick="fncSEL_TR(this)"><td>24</td><td>Lucy</td><td>84-705-74</td><td>2007/01/26</td><td>28</td></tr>
<tr onclick="fncSEL_TR(this)"><td>25</td><td>Margaret</td><td>94-255-250</td><td>2005/04/28</td><td>31</td></tr>
<tr onclick="fncSEL_TR(this)"><td>26</td><td>Martha</td><td>90-854-783</td><td>2005/04/28</td><td>59</td></tr>
<tr onclick="fncSEL_TR(this)"><td>27</td><td>Mary</td><td>65-233-735</td><td>2005/04/28</td><td>66</td></tr>
<tr onclick="fncSEL_TR(this)"><td>28</td><td>Matilda</td><td>20-108-369</td><td>2005/04/28</td><td>74</td></tr>
<tr onclick="fncSEL_TR(this)"><td>29</td><td>Naomi</td><td>4-393-431</td><td>2005/04/28</td><td>49</td></tr>
<tr onclick="fncSEL_TR(this)"><td>30</td><td>Phyllis</td><td>94-621-249</td><td>2006/07/18</td><td>91</td></tr>
<tr onclick="fncSEL_TR(this)"><td>31</td><td>Rebecca</td><td>5-3-369</td><td>2006/03/14</td><td>3</td></tr>
<tr onclick="fncSEL_TR(this)"><td>32</td><td>Rosemary</td><td>83-306-488</td><td>2005/04/28</td><td>97</td></tr>
<tr onclick="fncSEL_TR(this)"><td>33</td><td>Sabina</td><td>65-678-82</td><td>2005/04/28</td><td>96</td></tr>
<tr onclick="fncSEL_TR(this)"><td>34</td><td>Silvester</td><td>31-267-218</td><td>2007/06/28</td><td>68</td></tr>
<tr onclick="fncSEL_TR(this)"><td>35</td><td>Sophia</td><td>58-967-196</td><td>2005/04/28</td><td>1</td></tr>
<tr onclick="fncSEL_TR(this)"><td>36</td><td>Winifred</td><td>71-691-281</td><td>2005/04/28</td><td>43</td></tr>
<tr onclick="fncSEL_TR(this)"><td>37</td><td>Aaron</td><td>19-835-829</td><td>2007/10/09</td><td>64</td></tr>
<tr onclick="fncSEL_TR(this)"><td>38</td><td>Abraham</td><td>4-199-622</td><td>2005/04/28</td><td>93</td></tr>
<tr onclick="fncSEL_TR(this)"><td>39</td><td>Adam</td><td>39-324-628</td><td>2007/04/26</td><td>27</td></tr>
<tr onclick="fncSEL_TR(this)"><td>40</td><td>Alan</td><td>97-179-497</td><td>2005/04/28</td><td>85</td></tr>
<tr onclick="fncSEL_TR(this)"><td>41</td><td>Alber</td><td>17-801-0</td><td>2005/04/28</td><td>42</td></tr>
<tr onclick="fncSEL_TR(this)"><td>42</td><td>Alfred</td><td>25-783-369</td><td>2005/04/28</td><td>89</td></tr>
<tr onclick="fncSEL_TR(this)"><td>43</td><td>Alexander</td><td>66-483-329</td><td>2005/04/28</td><td>56</td></tr>
<tr onclick="fncSEL_TR(this)"><td>44</td><td>Andrew</td><td>82-467-691</td><td>2005/04/28</td><td>91</td></tr>
<tr onclick="fncSEL_TR(this)"><td>45</td><td>Antony</td><td>26-980-635</td><td>2005/04/28</td><td>88</td></tr>
<tr onclick="fncSEL_TR(this)"><td>46</td><td>Arnold</td><td>18-834-105</td><td>2007/04/02</td><td>90</td></tr>
<tr onclick="fncSEL_TR(this)"><td>47</td><td>Arthur</td><td>62-268-852</td><td>2006/04/04</td><td>38</td></tr>
<tr onclick="fncSEL_TR(this)"><td>48</td><td>Benedict</td><td>81-181-534</td><td>2005/04/28</td><td>62</td></tr>
<tr onclick="fncSEL_TR(this)"><td>49</td><td>Benjamin</td><td>43-471-241</td><td>2005/04/28</td><td>93</td></tr>
<tr onclick="fncSEL_TR(this)"><td>50</td><td>Cecil</td><td>99-256-293</td><td>2005/04/28</td><td>8</td></tr>
<tr onclick="fncSEL_TR(this)"><td>51</td><td>Charles</td><td>26-572-997</td><td>2005/04/28</td><td>57</td></tr>
<tr onclick="fncSEL_TR(this)"><td>52</td><td>Claude</td><td>92-699-667</td><td>2005/04/28</td><td>99</td></tr>
<tr onclick="fncSEL_TR(this)"><td>53</td><td>Conrad</td><td>21-231-412</td><td>2005/04/28</td><td>61</td></tr>
<tr onclick="fncSEL_TR(this)"><td>54</td><td>Daniel</td><td>44-140-363</td><td>2007/04/10</td><td>56</td></tr>
<tr onclick="fncSEL_TR(this)"><td>55</td><td>David</td><td>79-374-185</td><td>2000/1/1</td><td>54</td></tr>
<tr onclick="fncSEL_TR(this)"><td>56</td><td>Donald</td><td>99-192-301</td><td>1999/1/1</td><td>82</td></tr>
<tr onclick="fncSEL_TR(this)"><td>57</td><td>Douglas</td><td>83-660-114</td><td>2005/04/28</td><td>35</td></tr>
<tr onclick="fncSEL_TR(this)"><td>58</td><td>Duncan</td><td>78-841-278</td><td>2005/04/28</td><td>46</td></tr>
<tr onclick="fncSEL_TR(this)"><td>59</td><td>Edgar</td><td>14-900-947</td><td>2005/04/28</td><td>30</td></tr>
<tr onclick="fncSEL_TR(this)"><td>60</td><td>Edmund</td><td>58-800-518</td><td>2005/04/28</td><td>79</td></tr>
<tr onclick="fncSEL_TR(this)"><td>61</td><td>Edward</td><td>78-865-241</td><td>2005/04/28</td><td>27</td></tr>
<tr onclick="fncSEL_TR(this)"><td>62</td><td>Edwin</td><td>10-598-265</td><td>2005/04/28</td><td>35</td></tr>
<tr onclick="fncSEL_TR(this)"><td>63</td><td>Enoch</td><td>10-78-615</td><td>2005/04/28</td><td>4</td></tr>
<tr onclick="fncSEL_TR(this)"><td>64</td><td>Eugene</td><td>66-238-921</td><td>2005/04/28</td><td>35</td></tr>
<tr onclick="fncSEL_TR(this)"><td>65</td><td>Evelyn</td><td>85-800-8</td><td>2007/04/02</td><td>98</td></tr>
<tr onclick="fncSEL_TR(this)"><td>66</td><td>Ferdianand</td><td>7-63-457</td><td>2005/12/09</td><td>81</td></tr>
<tr onclick="fncSEL_TR(this)"><td>67</td><td>Frederick</td><td>65-21-912</td><td>2005/04/28</td><td>30</td></tr>
<tr onclick="fncSEL_TR(this)"><td>68</td><td>Gabriel</td><td>20-90-364</td><td>2007/02/06</td><td>13</td></tr>
<tr onclick="fncSEL_TR(this)"><td>69</td><td>Geoffrey</td><td>55-373-169</td><td>2005/04/28</td><td>86</td></tr>
<tr onclick="fncSEL_TR(this)"><td>70</td><td>George</td><td>45-243-630</td><td>2006/03/28</td><td>97</td></tr>
<tr onclick="fncSEL_TR(this)"><td>71</td><td>Gilbert</td><td>54-706-898</td><td>2006/03/28</td><td>69</td></tr>
<tr onclick="fncSEL_TR(this)"><td>72</td><td>Gregory</td><td>81-469-538</td><td>2005/04/28</td><td>0</td></tr>
<tr onclick="fncSEL_TR(this)"><td>73</td><td>Harold</td><td>26-799-66</td><td>2005/04/28</td><td>69</td></tr>
<tr onclick="fncSEL_TR(this)"><td>74</td><td>Henry</td><td>48-236-350</td><td>2006/03/23</td><td>11</td></tr>
<tr onclick="fncSEL_TR(this)"><td>75</td><td>Harace</td><td>87-79-887</td><td>2005/04/28</td><td>43</td></tr>
<tr onclick="fncSEL_TR(this)"><td>76</td><td>Hugh</td><td>49-709-978</td><td>2007/10/05</td><td>52</td></tr>
<tr onclick="fncSEL_TR(this)"><td>77</td><td>Humphery</td><td>64-134-110</td><td>2005/11/16</td><td>85</td></tr>
<tr onclick="fncSEL_TR(this)"><td>78</td><td>Issac</td><td>37-316-396</td><td>2005/04/28</td><td>49</td></tr>
<tr onclick="fncSEL_TR(this)"><td>79</td><td>Jacob</td><td>0-661-677</td><td>2005/10/19</td><td>48</td></tr>
<tr onclick="fncSEL_TR(this)"><td>80</td><td>Jerome</td><td>49-110-162</td><td>2006/12/27</td><td>3</td></tr>
<tr onclick="fncSEL_TR(this)"><td>81</td><td>John</td><td>1-476-245</td><td>2006/12/22</td><td>14</td></tr>
<tr onclick="fncSEL_TR(this)"><td>82</td><td>Kenneth</td><td>12-409-602</td><td>2007/04/26</td><td>94</td></tr>
<tr onclick="fncSEL_TR(this)"><td>83</td><td>Lawrence</td><td>87-358-744</td><td>2005/10/20</td><td>34</td></tr>
<tr onclick="fncSEL_TR(this)"><td>84</td><td>Leonard</td><td>34-619-30</td><td>2005/04/28</td><td>23</td></tr>
<tr onclick="fncSEL_TR(this)"><td>85</td><td>Leslie</td><td>35-341-975</td><td>2005/04/28</td><td>90</td></tr>
<tr onclick="fncSEL_TR(this)"><td>86</td><td>Lewis</td><td>6-563-226</td><td>2005/04/28</td><td>84</td></tr>
<tr onclick="fncSEL_TR(this)"><td>87</td><td>Martin</td><td>84-403-528</td><td>2005/09/26</td><td>91</td></tr>
<tr onclick="fncSEL_TR(this)"><td>88</td><td>Matthew</td><td>7-517-106</td><td>2005/04/28</td><td>60</td></tr>
<tr onclick="fncSEL_TR(this)"><td>89</td><td>Michael</td><td>59-46-266</td><td>2005/11/17</td><td>3</td></tr>
<tr onclick="fncSEL_TR(this)"><td>90</td><td>Nicholas</td><td>58-542-217</td><td>2005/04/28</td><td>37</td></tr>
<tr onclick="fncSEL_TR(this)"><td>91</td><td>Noel</td><td>57-682-819</td><td>2005/04/28</td><td>5</td></tr>
<tr onclick="fncSEL_TR(this)"><td>92</td><td>Oliver</td><td>1-927-147</td><td>2007/06/28</td><td>14</td></tr>
<tr onclick="fncSEL_TR(this)"><td>93</td><td>Oscar</td><td>27-87-971</td><td>2006/12/27</td><td>38</td></tr>
<tr onclick="fncSEL_TR(this)"><td>94</td><td>Owen</td><td>45-677-686</td><td>2005/04/28</td><td>70</td></tr>
<tr onclick="fncSEL_TR(this)"><td>95</td><td>Patricia</td><td>30-379-591</td><td>2006/09/26</td><td>91</td></tr>
<tr onclick="fncSEL_TR(this)"><td>96</td><td>Paul</td><td>8-584-495</td><td>2007/04/10</td><td>53</td></tr>
<tr onclick="fncSEL_TR(this)"><td>97</td><td>Peter</td><td>9-661-467</td><td>2005/04/28</td><td>13</td></tr>
<tr onclick="fncSEL_TR(this)"><td>98</td><td>Philip</td><td>2-593-763</td><td>2006/05/16</td><td>61</td></tr>
<tr onclick="fncSEL_TR(this)"><td>99</td><td>Richard</td><td>65-321-217</td><td>2006/05/16</td><td>17</td></tr>
<tr onclick="fncSEL_TR(this)"><td>100</td><td>Robert</td><td>90-981-101</td><td>2005/04/28</td><td>92</td></tr>
<tr onclick="fncSEL_TR(this)"><td>101</td><td>Roland</td><td>32-718-114</td><td>2005/11/16</td><td>93</td></tr>
<tr onclick="fncSEL_TR(this)"><td>102</td><td>Samuel</td><td>90-873-240</td><td>2005/04/28</td><td>5</td></tr>
<tr onclick="fncSEL_TR(this)"><td>103</td><td>Sabastian</td><td>81-104-454</td><td>2006/10/20</td><td>31</td></tr>
<tr onclick="fncSEL_TR(this)"><td>104</td><td>Theodore</td><td>16-843-434</td><td>2006/03/28</td><td>56</td></tr>
<tr onclick="fncSEL_TR(this)"><td>105</td><td>Thomas</td><td>40-926-733</td><td>2005/04/28</td><td>64</td></tr>
<tr onclick="fncSEL_TR(this)"><td>106</td><td>Vincent</td><td>26-656-364</td><td>2007/06/28</td><td>98</td></tr>
<tr onclick="fncSEL_TR(this)"><td>107</td><td>Vivian</td><td>95-731-600</td><td>2005/04/11</td><td>75</td></tr>
<tr onclick="fncSEL_TR(this)"><td>108</td><td>Wallace</td><td>19-664-957</td><td>2005/04/28</td><td>5</td></tr>
<tr onclick="fncSEL_TR(this)"><td>109</td><td>Walter</td><td>52-154-290</td><td>2005/04/28</td><td>88</td></tr>
<tr onclick="fncSEL_TR(this)"><td>110</td><td>William</td><td>71-9-421</td><td>2005/04/28</td><td>50</td></tr>
</tbody>
</table>
</body>
</html>