events.php.gr.jpの参加者リストを名前でソートする

受付などで、参加者のリストを印刷して使いたい。でもそのままでなく名前でソートしたものを印刷するためのjQuery。

<script type="text/javascript">
$(function(){
  // Member Object
  function Member(name, tr) {
    this.name = name;
    this.tr = tr;
  }
  // click action
  $("#sort_name").click(function(){
     var header;
     var lines = $("tr").filter(function(i){
        if (i == 0) header = this;
        return $(this).is(".odd") || $(this).is(".even") || $(this).is(".canceled");
      });
      var s = new Array();
      $.each(lines, function(i, n){
       s[i] = new Member($(n).children("td:first").text(), n);
      });
      s.sort(function(a, b){
        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
      });
      // add check and memo cols header
      $(header).find("th:first").before("<th>check</th>");
      $(header).find("th:last").after("<th>memo</th>");
      // append to table
      $("table").empty();
      $(header).appendTo("table");
      $.each(s, function(i, n){
        $(n.tr).find("td:first").before("<td></td>");
        $(n.tr).find("td:last").after("<td class='memo'></td>");
        $(n.tr).appendTo("table");
      });
    });

});
</script>

eventsページの参加者リストだけがtableなので、その部分を取得してガリガリしてます。

あとは、このJavascriptをトリガーするためのボタンを用意します。

<input type="button" value="名前で並び替え" id="sort_name">

もともとはエクセルで貼付けでいいやーと思ってたのですが、直前でキャンセルとかあった場合に、わからなくなるよとアドバイスを頂いたので、だったら直接書き換えちゃえばどうだろうと。

そして、ついでだから、チェック欄とメモ欄も作っちゃえと。

ただ、上記ソースをeventsのページに直接書き込むことができないので、ローカル環境でiframeを使ってtableタグだけをとって加工、表示するよにしました。

で、ローカルで実行した結果が以下。

でも、どうやって開場直前に印刷するかを考えてなかった。。そっちのほうが大事なのに。