<div id="xxx">
<table id="pList">
<tr id="pp">
<td class="td_List">
<table class="R_List">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" />
</td>
<td>
<input type="button" value="删除" />
</td>
</tr>
</table>
</div>帮忙写个东西（高分、在线等）
用js实现（jquery更好）
当点击“增加”时把整个pList这个table在自己的下面复制一份，最多复制9个（当==9时提示“最多为9个”）
当点击“删除”时删掉本身（当剩下最后一个再点删除时提示“最少保留一个”）
效果
1 2 3 增加 删除 点击添加
↓
1 2 3 增加 删除
1 2 3 增加 删除 点击删除→删掉自己
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
<script language="javascript">
function addrow(){
var div=document.getElementById("show");
if(div.childNodes.length<9){
div.innerHTML+=div.childNodes[0].outerHTML;
}
} function delrow(){
var div=document.getElementById("show");
if(div.childNodes.length-1>0){
var node=div.childNodes[div.childNodes.length-1];
div.removeChild(node)
}
}
window.onload=function(){
}
</script>
</head>
<body>
<div id="show">
<table id="pList">
<tr id="pp">
<td class="td_List">
<table class="R_List">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" onclick="addrow()" />
</td>
<td>
<input type="button" value="删除" onclick="delrow()" />
</td>
</tr>
</table>
</div> </body>
</html>
<script>
function add_(){//add方法已存在
var container = document.getElementById('container');//可以使用$()取
var tables = container.getElementsByTagName("table");
//alert(tables.length);
if(tables.length==18){
alert("最多为9个");
return;
}
if(tables.length>0){
var newTab = tables[0].cloneNode(true);//复制
container.appendChild(newTab);//追加在div的末尾
}
}
function delete_(){
var obj = event.srcElement?event.srcElement:event.target;
var targetTab = obj.parentNode.parentNode.parentNode.parentNode;//td,tr,tbody,table
var container = document.getElementById('container');
container.removeChild(targetTab);//移除事件源所在的table
}
</script>
<div id='container'>
<table>
<tr>
<td class="td_List">
<table class="R_List">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" onclick="add_()" >
</td>
<td>
<input type="button" value="删除" onclick="delete_()" >
</td>
</tr>
</table>
</div>楼主看看这个行不
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{font-size:14px}button{margin:3px} </style>
<script type="text/javascript"> var mytable=null; window.onload=function(){
mytable=new CTable("tbl",10);
} Array.prototype.each=function(f){for(var i=0;i <this.length;i++) f(this[i],i,this)} function $A(arrayLike){
for(var i=0,ret=[];i <arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
} Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
} CTable.prototype={
addrows:function(n){ //随机添加n个tr
new Array(n).each(this.add.bind(this))
},
add:function(){ //添加1个tr
var self=this;
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML="A： <INPUT NAME=A /> <br />B： <INPUT NAME=B />";
},
del:function(){ //删除所选tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){ //上移所选tr
var self=this
var upOne=function(tr){ //上移1个tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){
if (tr.rowIndex <self.tbl.rows.length-1) {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows) if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
highlight:function(){ //设置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){ //交换tr1和tr2的位置
var target=(tr1.rowIndex <tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){ //从tr得到 checkbox对象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){
tr.style.backgroundColor="#ffffff"
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
} function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
} </script> </head>
<body> <button onClick="javascript:mytable.add()">添加一行 </button>
<button onClick="javascript:mytable.del()">删除选定行 </button>
<button onClick="javascript:mytable.up()">上移选定行 </button>
<button onClick="javascript:mytable.down()">下移选定行 </button>
<table width=100%>
<tr>
<td valign="top"> <table border id="tbl" width="80%"> </table> </td>
</tr>
</table>
</body>
</html>
var time =1;
function add(){
if(time>2)
{
alert("only 3")
}
else
{
var a = document.getElementsByTagName("div")[0].innerHTML;
var copy = document.createElement("div");
var a = document.getElementsByTagName("div")[0].innerHTML;
copy.innerHTML=a;
document.body.appendChild(copy);
time = time +1;
}
}
function dlt(o){
if(time<2)
{
alert("must 1");
}
else
{
var obj = o.parentNode.parentNode.parentNode;
obj.parentNode.removeChild(obj);
time = time -1;
}
}</script>
<input type="button" value="增加" onclick="add()" />
</td>
<td>
<input type="button" value="删除" onclick="dlt(this)"/>
</td>
应该是5个父节点才到div.刚才只到了<tbody>标签
// 拿上面代码改的. 为了让你看清楚 给你加的效果..到时候 你把注释为"测试用"的删除就可以
<script>
var arr = ['red','yellow','blue','black']; var i = 0; // 测试用function add_(){
var container = document.getElementById('container');
var tables = container.getElementsByTagName("table");
if(tables.length==18){
alert("最多为9个");
return;
}
if(tables.length>0){
var newTab = tables[0].cloneNode(true);
newTab.style.backgroundColor = arr[i++%arr.length]; // 测试用
container.appendChild(newTab);
}
}
function delete_(){
var obj = event.srcElement?event.srcElement:event.target;
var targetTab = obj.parentNode.parentNode.parentNode.parentNode;
var container = document.getElementById('container');
if(container.getElementsByTagName('table').length > 2){
container.removeChild(targetTab);
}else{
alert("至少保留一个");
}
}
</script>
<div id='container'>
<table>
<tr>
<td class="td_List">
<table class="R_List">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" onclick="add_()" >
</td>
<td>
<input type="button" value="删除" onclick="delete_()" >
</td>
</tr>
</table>
</div>
<script>
var arr = ['red','yellow','blue','black']; var i = 0; // 测试用function add_(){
var container = document.getElementById('container');
var tables = container.getElementsByTagName("table");
if(tables.length==18){
alert("最多为9个");
return;
}
if(tables.length>0){
var newTab = tables[0].cloneNode(true);
newTab.style.backgroundColor = arr[i++%arr.length]; // 测试用
container.appendChild(newTab);
}
}
function delete_(event){
var obj = event.srcElement?event.srcElement:event.target;
var targetTab = obj.parentNode.parentNode.parentNode.parentNode;
var container = document.getElementById('container');
if(container.getElementsByTagName('table').length > 2){
container.removeChild(targetTab);
}else{
alert("至少保留一个");
}
}
</script>
<div id='container'>
<table>
<tr>
<td class="td_List">
<table class="R_List">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" onclick="add_()" >
</td>
<td>
<input type="button" value="删除" onclick="delete_(event)" >
</td>
</tr>
</table>
</div>