プロフィール

島田圭二

Author:島田圭二
Follow shimanp on Twitter

カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
読断と変見内検索
訪問ありがとうございます
最近のコメント
最近のトラックバック
関連リンク
カテゴリー
月別アーカイブ


スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
bookmarklet - サイトを見やすく改行する
ネットしてるとき、改行が少なくて見づらい思いをしたことはありませんか?
僕はしょっちゅうです。
なのでbookmarkletを作ってみました。

見づらいわ!

ソースは以下になります。
javascript:(function(e){e.innerHTML=e.innerHTML.replace(/(、|。)/g,'$1<br />')})(document.body)
ただ「、」「。」があったら改行を入れているだです。
なので逆に見づらくなる可能性もあります。たとえばこの記事で実行したりすると。。。

スポンサーサイト
javascript | 【2010-03-29(Mon) 13:25:46】 | Trackback:(0) | Comments:(0)
右のテーブルの行を左のテーブルにコピーする - javascript
javascriptで右のテーブルの行のデータをコピーして左のテーブルにコピーするのを
やってみた。たいして難しいことはしてないけど忘れるのでメモ。

とりあえずサンプル
firefox3.X、IE6では動くはず。
ちなみに動かすとわかるけど、同じカナのものはひとつしか追加できないよう
重複チェックしてる。

ソース

<html>
<head><title>scrolltest</title>
<style>
</style>
<script language="javascript">
function addRow() {
var rTable= document.getElementById('rightTable');
var lBody= document.getElementById('leftBody');
var rChecks = document.getElementsByName('example');
var chkCnt = rChecks.length;
for(var i = 0; i < chkCnt; i++){
chk = rChecks[i];
if(chk.checked){
var wamei = rTable.rows[i].cells[1];
if(chkUniqueLeftTable(wamei.innerHTML)){
var lang = rTable.rows[i].cells[2];
var tr = document.createElement('tr');
var delTd = document.createElement('td');
var delBtn = document.createElement('input');
delBtn.type="button";
delBtn.value="削除";
delBtn.onclick=function(){return delRow(this)};
delTd.appendChild(delBtn);
delTd.style.width = 50;
tr.appendChild(delTd);

var waTd = document.createElement('td');
waTd.style.width = 150;
waTd.innerHTML = wamei.innerHTML;
waTd.name = "wamei";
tr.appendChild(waTd);

var langTd = document.createElement('td');
langTd.style.width = 100;
langTd.innerHTML = lang.innerHTML;
tr.appendChild(langTd);

lBody.appendChild(tr);

}
}
}
}

function delRow(e){
var tr = e.parentNode.parentNode;
var tbod = tr.parentNode;
tbod.deleteRow(tr.sectionRowIndex);
}

function chkUniqueLeftTable(wamei){
var lTable= document.getElementById('leftTable');
var tcnt = lTable.rows.length;
for(var j = 0; j < tcnt; j++){
var waTd = lTable.rows[j].cells[1];
var wa = waTd.innerHTML;
if(wamei == wa){
return false;
}
}
return true;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<table border="1" cellpadding="4" cellspacing="0" style="border-bottom-width:0px">
<th width="50"> </th>
<th width="150" align="center">カナ</th>
<th width="100" align="center">英語</th>
</table>
<div style="width:350px;height:158px;overflow-x:hidden;overflow-y:scroll;">
<table id="leftTable" border="1" cellpadding="4" cellspacing="0">
<tbody id="leftBody">
</tbody>
</table>
</div>
</td>
<td>
<input type="button" value="<<追加" onclick="addRow()"><br>
</td>
<td>
<table border="1" cellpadding="4" cellspacing="0" style="border-bottom-width:0px">
<th width="30"> </th>
<th width="150" align="center">カナ</th>
<th width="100" align="center">英語</th>
</table>
<div style="width:330px;height:158px;overflow-x:hidden;overflow-y:scroll;">
<table id="rightTable" border="1" cellpadding="4" cellspacing="0">
<tbody id="rightBody">
<tr>
<td width="30"><input type="checkbox" name="example" ></td>
<td width="150">ゼロ</td>
;<td width="100">zero</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>イチ</td>
<td>one</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>二</td>
<td>two</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>サン</td>
<td>three</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>シ</td>
<td>four</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>ゴ</td>
<td>five</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>ロク</td>
<td>six</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>ナナ</td>
<td>seven</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>ハチ</td>
<td>eight</td>
</tr>
<tr>
<td><input type="checkbox" name="example" ></td>
<td>キュウ</td>
<td>nine</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>



javascript | 【2009-07-28(Tue) 23:25:08】 | Trackback:(0) | Comments:(0)
javascriptってこんな書き方できるんだ。すげぇ。
IT戦士:for 文と無名関数のイディオム
for (var i = 0, len = list.length; i < len; i++) (function(node, i) {
var text = node.textContent;
node.onclick = function() { alert(text) };
})(list[i], i)
はじめ見たとき何だコレって思った。
この記事ではパフォーマンスがどうとかいう話をしているけど、
こんな書き方できるってことにビックリした。

で自分なりにこれどういう意味なのか説明してみる。

まずFor文


for (var i = 0, len = list.length; i < len; i++)
当たり前だけど、ここまでがFor文でiをlist内の要素の数だけ回す。

で、回しながらどんな処理するの?


それは無名関数でこの部分
(function(node, i) {
var text = node.textContent;
node.onclick = function() { alert(text) };
})(list[i], i)

最後についてる
(list[i], i)
は無名関数に渡す引数

以上短いながら説明終わり。
javascriptっておもしろい。とても柔軟な言語なんだな。

javascript | 【2009-01-20(Tue) 00:18:31】 | Trackback:(0) | Comments:(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。