上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
スポンサー広告
|
【--------(--) --:--:--】
|
Trackback(-) |
Comments(-)
javascriptで右のテーブルの行のデータをコピーして左のテーブルにコピーするのを
やってみた。たいして難しいことはしてないけど忘れるのでメモ。
とりあえずサンプル。
firefox3.X、IE6では動くはず。
ちなみに動かすとわかるけど、同じカナのものはひとつしか追加できないよう
重複チェックしてる。
ソース
やってみた。たいして難しいことはしてないけど忘れるのでメモ。
とりあえずサンプル。
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>
スポンサーサイト
