テーブルをソート可能にするTinyTableで行を削除できるようにする

テーブルをソートできるようにするスクリプトはいくつもありますが、なかでもTinyTableというのがあって、結構使い勝手がいいのだけれども、要素を削除したりするとエラーが出るので困っていた。

で、色々探したけれど、要素を削除できるようなものは大抵の場合、大仰で機能過多なところがあったので、改変してみた。例によってCodeReposにコミットしました。

• コード
• サンプル

で、行を削除するプログラムは例えばこんな感じで、

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript">
function deleteSelected(id){
  var content = document.evaluate("//table[@id='table']//tr[child::td='" + id + "']", document, null, 7, null);
  var table = $("table");
  content = content.snapshotItem(0);
  if(table == null || content == null){
    return;
  }
  for(var index in table.rows){
    if(table.rows[index] == content){
      break;
    }
  }
  table.deleteRow(index);
  sorter.update();
}
</script>

元のTinyTableと違うのは

var sorter = new TINY.table.sorter("sorter");
  sorter.head = "head";
  sorter.asc = "asc";
  sorter.desc = "desc";
  sorter.even = "evenrow";
  sorter.odd = "oddrow";
  sorter.evensel = "evenselected";
  sorter.oddsel = "oddselected";
  sorter.paginate = true;
  sorter.currentid = "currentpage";
  sorter.limitid = "pagelimit";
  sorter.bodyid = "tablebody";
  sorter.init("table",1);

初期化のときに、tbodyにつけたidを渡しているのと、行を削除するたびにupdateという関数を読んでいること。

あとはソースを見てください。