<html>
<head>
</head>
<script language="javascript">
function addRecord2()
{
var _table1 = document.getElementById("tb1");
var _table2 = document.getElementById("tb2");
var kit = true;
for(i=0;i<_table1.rows.length;i++)
{
if(_table1.rows[i].style.backgroundColor=="yellow")
{
for(var j=0;j<_table2.rows.length;j++)
{
if(_table2.rows[j].innerHTML == _table1.childNodes[0].childNodes[i].innerHTML)
{
kit=false;
}
}
if(kit==true)
{
_table2.childNodes[0].appendChild(_table1.childNodes[0].childNodes[i].cloneNode(true));
_table2.rows[_table2.rows.length-1].style.backgroundColor = "";
}
}
kit = true;
}
}
function addRecord()
{
var _table1 = document.getElementById("tb1");
var _table2 = document.getElementById("tb2");
var kit = true;
for(i=0;i<_table1.rows.length;i++)
{
if(_table1.rows[i].style.backgroundColor=="yellow")
{
_table2.childNodes[0].appendChild(_table1.childNodes[0].childNodes[i].cloneNode(true));
_table2.rows[_table2.rows.length-1].style.backgroundColor = "";
//_table1.deleteRow(i);
_table1.rows[i].style.display="none";
//addRecord();
}
kit = true;
}
}
function delRecord()
{
var _table1 = document.getElementById("tb1");
var _table2 = document.getElementById("tb2");
for(i=0;i<_table2.rows.length;i++)
{
if(_table2.rows[i].style.backgroundColor=="yellow")
{
for(var j=0;j<_table1.rows.length;j++)
{
if(_table1.rows[j].innerHTML == _table2.childNodes[0].childNodes[i].innerHTML)
{
_table1.rows[j].style.backgroundColor = "";
_table1.rows[j].style.display = "block";
}
}
_table2.deleteRow(i);
delRecord();
}
}
}
</script>
<body>
<div >
表格一
<table border=1>
<tr hand';"; = 'yellow'">
<td>test1</td>
<td>test11</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test2</td>
<td>test21</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test3</td>
<td>test31</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test4</td>
<td>test41</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test5</td>
<td>test51</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test6</td>
<td>test61</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test7</td>
<td>test71</td>
</tr>
<tr hand';"; = 'yellow'">
<td>test4</td>
<td>test41</td>
</tr>
</table>
</div>
<div >
表格二
<table border=1>
</table>
</div>
<input type="button" value="add" />
<input type="button" value="del" />
<p>
备注：<br />
1.选择表格一中的项目，点"add"可追加到表格二里，并且让选择的项目隐藏。<br />
2.选择表格二中的项目，点"del"可删除选择的项目，并且出现在表格一里。<br />
3.当鼠标单击表格中某项目时，左键选择项目，右键取消选择。<br />
4.在选择表格一中的项目时候，重复项不可追加到表格二里。
</p>
</body>
</html>
评论