有两个表 table,tb1 ,tb2 两个表格式一样。在最后一列都有个“执行”按钮 onclick 时间 执行 Con()函数问题 :这个函数的要求就是 当点击tb1里面的执行按钮时,获取点击的这行的每一列的text ,然后把这行放到tb2中, 再在tb1中删除这一行。
如果点击的是tb2的执行,则不执行任何东西。 就等于点击了tb1 的执行后把当前行复制到tb2中,有个小小的要求,就是必须复制到tb2的第二行,因为第一行是表格每一列的标题
如果点击的是tb2的执行,则不执行任何东西。 就等于点击了tb1 的执行后把当前行复制到tb2中,有个小小的要求,就是必须复制到tb2的第二行,因为第一行是表格每一列的标题
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
function Con(obj){
var t = obj.parentNode.parentNode.parentNode.parentNode;
if(t.id=="t1"){
var td = obj.parentNode;
var tr = obj.parentNode.parentNode;
var t2 = document.getElementById("t2");
t2.firstChild.appendChild(tr);
}
}</script>
</head><body>
table1
<table id="t1" border=1>
<tr>
<td>1</td><td><a href="javascript:;" onclick="Con(this)">执行</a></td>
</tr>
<tr>
<td>2</td><td><a href="javascript:;" onclick="Con(this)">执行</a></td>
</tr>
<tr>
<td>3</td><td><a href="javascript:;" onclick="Con(this)">执行</a></td>
</tr>
</table>
table2
<table id="t2" border=1>
<tr>
<td>id</td><td>执行</td>
</tr>
</table>
</body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function Con()
{
var el= event.srcElement.parentNode.parentNode.cloneNode(true);
var innerHTMl="<input type='button' value='执行' />";
el.lastChild.innerHTML=innerHTMl;
var table=document.getElementById('tb2');
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null)
{
tbody[0].appendChild(el);
}
else
{
table.appendChild(el);
}
table=document.getElementById('tb1');
tbody=table.getElementsByTagName("tbody");
if(tbody!=null)
{
tbody[0].removeChild(event.srcElement.parentNode.parentNode);
}
else
{
table.removeChild(event.srcElement.parentNode.parentNode);
}
}
</script>
</HEAD> <BODY>
<table id='tb1'>
<tr>
<td>ID</td><td>Name</td><td>Sex</td><td>Age</td><td>操作</td>
</tr>
<tr>
<td>1</td><td>L</td><td>男</td><td>25</td><td><input type='button' value='执行' onclick='Con()' /></td>
</tr>
<tr>
<td>2</td><td>W</td><td>男</td><td>22</td><td><input type='button' value='执行' onclick='Con()' /></td>
</tr>
<tr>
<td>3</td><td>T</td><td>女</td><td>21</td><td><input type='button' value='执行' onclick='Con()' /></td>
</tr>
<tr>
<td>4</td><td>C</td><td>男</td><td>24</td><td><input type='button' value='执行' onclick='Con()' /></td>
</tr>
</table>
<table id='tb2'>
<tr>
<td>ID</td><td>Name</td><td>Sex</td><td>Age</td><td>操作</td>
</tr>
</table>
</BODY>
</HTML>
table操作注意其tbody问题就好了
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
rowInfo = new Array();
var i = 1;
function insRow()
{
var obj1=document.getElementById("t2");
var obj = obj1.insertRow();
obj.insertCell().innerHTML = "<font color=red>"+rowInfo[0]+"</font>";
obj.insertCell().innerHTML = "<font color=red>"+rowInfo[1]+"</font>";
obj.insertCell().innerHTML = "<input type='button' value='点我' onclick='con('tr2',"+i+")'>";
i++;
}
function con(str,index){
if(str == "t1"){
var table = document.getElementById("t1");
var tr = table.rows[index];
var cell = tr.cells;
for(var i = 0; i < cell.length -1; i++){
var value = cell[i].childNodes[0].nodeValue;
rowInfo.push(value);
}
//使用tbody来删除子节点, 删除table的一行必须使用tbody
var table_d = document.getElementById("tbody1");
var tbody_d = table_d.childNodes[index];
table_d.removeChild(tbody_d);
insRow();
}
}
</script>
</head><body>
<table id = "t1">
<tbody id="tbody1">
<tr>
<td>列一</td>
<td>列二</td>
<td>操作</td>
</tr>
<tr>
<td>fsafa</td>
<td>fsaf</td>
<td><input type="button" value="点我" onclick="con('t1',1)"></td>
</tr>
<tr>
<td>jghjg</td>
<td>gsdgs</td>
<td><input type="button" value="点我" onclick="con('t1',2)"></td>
</tr>
</tbody>
</table>
<table id="t2">
<tbody id="tbody2">
<tr>
<td>列一</td>
<td>列二</td>
<td><input type="button" value="点我" onclick="con('t2')"></td>
</tr>
<tbody>
</table>
</body>
</html>