プロフィール

島田圭二

Author:島田圭二
Follow shimanp on Twitter

カレンダー
06 | 2009/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(-)
右のテーブルの行を左のテーブルにコピーする - 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)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。