HTMLのテーブルにExcelのようなフィルター機能を付けようと思い、jQueryのプラグインを探したところ、見付からなかったので、自分で作ってみました。
サンプル
tablefilterサンプル
プラグイン
ダウンロードしてください。
jquery.tablefilter
使用例
jQueryの本体と「jquery.min.js」と上でダウンロードした「jquery.tablefilter.js」を適当なフォルダに保存します。それに応じて「src=」の部分を書き換えてください。
「$(“table”).tablefilter();」と書くとそのページ内のすべてのテーブルにフィルターボタンが設置されます。
特定のテーブルだけに適用するときは、テーブルにidを設定し「$(“#mytable”).tablefilter();」のようにします。
「-」を「ハイフン」と読みますが、年配の人だと「ハイフォン」と読む人が多いようです。
英語の発音記号を見るとどちらでも正しいようですが、「ハイフォン」だとベトナムの都市を思い浮かべてしまうので、私は「ハイフン」と読んでいます。
正規表現におけるハイフンは「○から○まで」という範囲を指定するときに使えてとても便利ですが、この挙動について勘違いしていたので、調べてみました。JavaScriptです。
「a-b-c」という文字列に対して正規表現「[a-c]」を使ってみます。
x="a-b-c";
y=x.match(/[a-c]/g);
z=y.join(",");
この場合、結果(z)は「a,b,c」となりました。
同じようにして色々と試してみます。
| 元 |
正規表現 |
結果 |
| a-b-c |
[a-c] |
a,b,c |
| a-b-c |
[a-] |
a,-,- |
| a-b-c |
[-c] |
-,-,c |
| a-b-c |
[a-c-] |
a,-,b,-,c |
つまり[○-○]という形で使った場合は「○から○まで」という意味になりますが、これ以外では単に「-」という文字そのものを表すということになるようです。
[a-c]⇒a,b,c
[a-]⇒a,-
[-c]⇒-,c
[a-c-]⇒a,b,c,-
実は、今までハイフン(「-」)を指定するには「\-」としていたのですが、実際は「\」は不要でした。
EANコード(JANコード)は13桁ですが、最後の桁はチェックデジットです。
チェックデジットの作り方は色々ありますが、EANコードの場合は「モジュラス10ウェイト3」と言われる方法を使っています。
- 12桁について、右から数えて奇数番目の数は1倍、偶数番目の数は3倍として合計します。
- 合計を10で割ったあまりを求めます。
- あまりが0のときは「0」、0以外のときは「10-あまり」がチェックデジットとなります。
JavaScriptでサンプルを作ってみました。
function checkdigit(txt) {
//EANコード用のチェックデジット(モジュラス10ウェイト3)
var s = 0;
for (var i = 0; i < txt.length; i++) {
s += txt.substr(txt.length - i - 1, 1) * ((i % 2 == 0) ? 3 : 1);
}
return ((s % 10 == 0) ? 0 : 10 - s % 10);
}
最近はGoogleよりもBingの方が良いという意見を目にします。
そこでGoogle検索結果が納得できないときに、Bingで検索するためのブックマークレットを考えてみました。
Googleの検察結果のページのURLには「q=言葉」という部分があります。
実行すると、これをBingの検察結果のページのURLに当てはめて表示します。
なお逆にBingの検察結果で実行するとGoogleの検索結果が表示されます。
ブックマークレットを次に示します。
bing-google
Firefoxならばブックマークツールバーまでドラッグしてください。
Internet Explorerならば右クリックからお気に入りに保存してください。
javascript:(function(){b="http://www.bing.com/search";g="http://www.google.co.jp/search";d=document.location;if(d.href.match(b)){u=g}else{u=b}d.href=u+"?q="+d.href.replace(/.*[&\?]q=(.*?)&?/,"$1")})()
改行を施したのが次です。
javascript:(function(){
b="http://www.bing.com/search";
g="http://www.google.co.jp/search";
d=document.location;
if(d.href.match(b)){
u=g
}else{
u=b
}
d.href=u+"?q="+d.href.replace(/.*[&\?]q=(.*?)&?/,"$1")
})()
曜日が変わらないカレンダーについて書きましたが、これをJavaScriptのユーザー定義関数にしてみました。
JavaScriptの通常の日付(日付オブジェクト、ndate)を与えると「ハンキ・ヘンリー・パーマネント・カレンダー」における日付(文字列、pdate)に変換します。
返る値は「2012-1-19」という形式です。
使い道が思い当たりませんが。
function date2hhpc(ndate) {
var di, ldi, preldi, y, ydi, isext, sdi, pdate;
di = (ndate - (new Date(2012, 0, 1))) / 86400000; //日のインデックス。2012-01-01(初日)を0日目とする
if (di < 0 || di > 20453) { //対応しているのは2012年から2167年まで
return ("error");
}
ldi = -1; //大晦日のインデックス
year = 2011;
while (di > ldi) {
year++;
preldi = ldi; //前年の大晦日
isext = String(year).match(/(2015|2020|2026|2032|2037|2043|2048|2054|2060|2065|2071|2076|2082|2088|2093|2099|2105|2111|2116|2122|2128|2133|2139|2144|2150|2156|2161|2167)/) ? 1 : 0;
ldi += 364 + isext * 7;
}
ydi = di - preldi - 1;
if (ydi > 363) {
pdate = "E/" + (ydi - 363);
} else {
sdi = ydi % 91;
x = Math.floor(sdi / 30) + 1;
x = (x > 3) ? 3 : x;
pdate = (Math.floor(ydi / 91) * 3 + x) + "-" + (sdi - 30 * (x - 1) + 1);
}
return (year + "-" + pdate);
}
ウェブページの文字列をコピーされないようにする方法として、右クリックを禁止する方法と文字列の選択を禁止する方法が考えられます。
右クリック禁止
右クリックを禁止するにはHTMLを次のように書きます。
<div oncontextmenu="return false;">テキスト</div>
右クリックをして表示されるメニューを「コンテキストメニュー」などと言いますが、これを無効にします。
「div」でなく「body」にこれを設定するとウェブページ全体で右クリックができなくなります。
文字列選択禁止
文字列の選択を禁止するには次のように書きます。
<div onselectstart="return false;">テキスト</div>
文字列を選択しようとしてもできません。
これも「body」に設定するとウェブページ全体で文字列選択ができなくなります。
※IE限定ですが「unselectable=”on”」を使う方法もあります。
無効にするブックマークレット
これらを無効にするブックマークレットを考えてみました。
選択可能
Firefoxならばブックマークツールバーまでドラッグしてください。
Internet Explorerならば右クリックからお気に入りに保存してください。
javascript:(function(){obs=document.all;for(i=0;i<obs.length;i++){obs[i].oncontextmenu='return true;';obs[i].onselectstart='return true;';}})()
bodyだけでなく、すべてのタグについて、onselectstartとoncontextmenuに「return true;」をセットします。
なお、ここに挙げた方法がすべてではありません。これら以外にも文字列選択を禁止する方法はあります。例えば「document.onmousedown=”return false;”」のようにドキュメントに対してクリックそのものを禁止したりする方法もあります。そのため、すべてのパターンに対応したブックマークレットを作るのはかなり面倒です。頻繁に利用するページならばブックマークレットを使うのは効果がありますが、そうでないならばソースを直に見てしまうのが確実です。
1桁の数「5」に「0」を追加して2桁「05」で表示するような手法を「ゼロ埋め」や「パディング」などと言います。
Excelには「TEXT」、VBAには「Format」、PHPには「sprintf」という関数がありますが、JavaScriptには見当たりません。
これを作ってみます。 続きを読む…
JavaScriptの配列を操作する「shift」などのメソッドは便利なのですが、元の配列への影響や返り値がまちまちなので、覚えられません。
一覧表にまとめてみました。
| メソッド |
返り値 |
配列への影響 |
| a.shift() |
最初の要素を返す。 |
最初の要素が削除される。 |
| a.unshift(要素) |
挿入後の配列の長さを返す。 |
先頭に要素が挿入される。 |
| a.pop() |
最後の要素を返す。 |
最後の要素が削除される。 |
| a.push(要素) |
挿入後の配列の長さを返す。 |
最後に要素が挿入される。 |
| a.slice(i,j) |
0から数えてi番目からj-1番目までの要素を配列として返す。 |
なし。 |
| a.splice(i,j) |
0から数えてi番目からj個の要素を配列として返す。 |
該当する要素が削除される。 |
| a.concat(配列) |
aの後に配列を追加し、追加後の配列を返す。 |
なし。 |
unshiftの返り値はブラウザやそのバージョンによって異なるようで、例えばIE5で返り値を求めようとするとエラーになりました。
ソートのアルゴリズムについて調べました。
代表的なソート方法5種類について概略をまとめます。
n個の要素を持つ配列を昇順(小さい数から大きい数)にソートする場合です。 続きを読む…
二つの配列を統合する方法に「マージ」というのがあります。
それぞれの先頭の要素を比べ、小さい方をとります。とった要素は結果用の別の配列に追加します。
とられた配列は先頭の要素が替わります。
またそれぞれの先頭の要素を比べ、小さい方をとります。
これを繰り返します。
いずれどちらかの配列が空になりますので、残った方の配列を結果用の配列にそのまま付け足します。 続きを読む…
最近のコメント