初めてのUserScript !添削希望!

javascript

今度うちの職場に入る事になったシステムはソースコードとか見せてくれないようだけど、ブラウザベースで動作するので、UserScriptを使って、クライアント側で勝手に機能追加とかできないかと目論んでいます。

と言うわけで、

http://d.hatena.ne.jp/os0x/20090522/chrome2
を参考に初めてのUserScriptを作ってみました。Google Chrome 2.0で動作確認しています。
誰か添削してくれるとうれしい。

機能

  • 読み込んだページ内の表に、簡易なフィルタ機能を追加します。
  • 動作イメージ
    • 表
学生番号 氏名 成績
130924 中田 A
130952 田中 B
131026 仲田 A
136523 田仲 E
221023 中多 P
    • フィルタをかけた状態

使い方

  • 下記コードを、"TableFilter.user.js"と言う名前で"User Scripts"フォルダに保存します。
  • User Scriptを有効にしてGoogle Chromeを起動します。(以上については上記リンク参照)
  • 表の含まれているページを開きます。
  • 表の最初のセルをダブルクリックするとエクセルのフィルタっぽい三角とテキスト入力欄が表示されるので、テキストを入力して、三角をクリックするとフィルタがかかります。
  • キーワードは、" " か "." 区切りでor 検索します。("."区切りにしたのは、学籍番号とかテンキーでどんどん入力しながら絞り込む事を想定したため。)
  • 各自の責任において試してください

コードについて(プログラマのひとたちへ)

  • JavaScriptは素人なので変なとこあれば是非ご注意ください
  • 覚え立てのカリー化とか使ってみたのですがもっとシンプルな方法があるのかな
    • 以下コード
// ==UserScript==
// @name        add filter to tables
// @namespace   http://robbie21.com/
// @include     http://*
// @version     1.0.0
// ==/UserScript==

(function(){
	addFilterToTables();	
})();


function addFilterToTables(){
	var tables = document.getElementsByTagName("table");
	for(var i = 0;i < tables.length;i++){
		var table = tables[i];
		var firstCell = table.rows[0].cells[0];
		firstCell.addEventListener("dblclick",setFilter(table,firstCell));
	}
}


function setFilter(table,cell){
	return function(){
		if (cell.filterMode) {
			cell.removeChild(cell.filter);
			cell.removeChild(cell.filterTextBox);
			cell.filterMode=false;
			return;
		}
		else {
			var a = document.createElement("a");
			var txbox = document.createElement("input");
			a.addEventListener("click", toggleFilter(table, txbox,a));
			a.innerText="▼";
			cell.appendChild(a);
			cell.appendChild(txbox);
			cell.filterMode = true;
			cell.filter = a;
			cell.filterTextBox = txbox;
		}
	}
}

function toggleFilter(table, input,a){
	return function(){
		if (table.filterOn) {
			table.filterOn = false;
			for (var i = 1; i < table.rows.length; i++) {
				var row = table.rows[i];
				row.setAttribute("style", "");
			}
			a.innerText="▼";
		}else{
			table.filterOn = true;
			
			// "." か "空白" 区切りで or 検索
			var filterText = input.value.replace(/\./g,"|");
			filterText = filterText.replace(/ /g,"|");
			
			for (var i = 1; i < table.rows.length; i++) {
				var row = table.rows[i];
				if (!row.innerText.match(filterText)) {
					row.setAttribute("style", "display:none;");
				}
				else {
					row.setAttribute("style", "");
				}
			}
			a.innerText="▲";
		}
		
	}
}