<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table tr操作</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var rownnumber=1;
var addId = "tr_botton_1";
var trids=[];
trids[1]=addId;
function del(id){
if(addId == "tr_botton_1"){
return false;
}
if(rownnumber > 1){
trids[id]="";
id = "tr_botton_"+id;
if(id == addId){
/******查找上一个兄弟节点,下一个兄弟节点是next()*****/
addId = $("#"+addId).prev().attr("id");
}
var tr1=$("#tr1").attr("rowspan");
var tr2=$("#tr2").attr("rowspan");
$("#tr1").attr("rowspan",parseInt(tr1)-1);
$("#tr2").attr("rowspan",parseInt(tr2)-1);
$("#mytable").children().find("#"+id).remove();
$("#logs").html($("#logs").html()+"del addId:"+addId+"<br/>");
}
}
function add(){
rownnumber++;
var tr1=$("#tr1").attr("rowspan");
var tr2=$("#tr2").attr("rowspan");
$("#tr1").attr("rowspan",parseInt(tr1)+1);
$("#tr2").attr("rowspan",parseInt(tr2)+1);
$("#"+addId).after('<tr id="tr_botton_'+rownnumber+'"><td bgcolor="#FFFFFF">tr_botton_'+rownnumber+'</td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"><a href="###" οnclick="del('+rownnumber+')">删除</a></td></tr>')
addId = "tr_botton_"+rownnumber;
trids[rownnumber]=addId;
$("#logs").html($("#logs").html()+"add addId:"+addId+"<br/>");
}
function save(){
var ids="";
for(var i in trids){
if(trids[i] != ""){
ids += trids[i]+"<br/>"
}
}
$("#logs").html($("#logs").html()+"<br/>"+ids);
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" id="mytable">
<tr>
<td rowspan="3" bgcolor="#FFFFFF" id="tr1">1</td>
<td rowspan="2" bgcolor="#FFFFFF" id="tr2">2</td>
<td bgcolor="#FFFFFF">3</td>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">6</td>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF">9</td>
<td bgcolor="#FFFFFF">10</td>
<td bgcolor="#FFFFFF">11</td>
<td bgcolor="#FFFFFF">12</td>
<td bgcolor="#FFFFFF">13</td>
<td bgcolor="#FFFFFF">14</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF"><a href="###" οnclick="save()">save</a></td>
</tr>
<tr id="tr_botton_1">
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><a href="###" οnclick="add()">add</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">合计</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
<div id="logs"></div>
</body>
</html>