当前位置: 代码迷 >> Web前端 >> table 平添删除row
  详细解决方案

table 平添删除row

热度:361   发布时间:2012-10-31 14:37:31.0
table 添加删除row
<body> 
 
<table  width="100%" id="detailItem">
<tr><td align="center"><b>学历信息</b></td></tr>
<table>
<table cellspacing="1" cellpadding="1" border="1" width="100%" id="detailItem"> 
  <tbody id="detailItemBody"> 
  <tr> 
    <td nowrap="" width="8%" align="center" class="content_info_items">学校</td> 
    <td nowrap="" width="8%" align="center" class="content_info_items">开始时间</td> 
    <td nowrap="" width="10%" align="center" class="content_info_items">结束时间</td> 
    <td nowrap="" width="10%" align="center" class="content_info_items">学历</td> 
    <td nowrap="" width="18%" align="center" class="content_info_items">专业</td> 
    <td nowrap="" width="8%" align="center" class="content_info_items">毕业?</td> 
   
    <td width="10%" align="center" class="content_info_items">操作</td> 
  </tr> 
  <tr id="tr1"> 
    <td width="8%" id="td1"  > <div align="center"> <input type="text"  size="8" name="SampleOrderContentID"/> </div></td> 
    <td nowrap="" width="8%" ><div align="center"><input type="text" size="8" name="ItemNo" id="ItemNo1"/> </div></td> 
    <td nowrap="" width="10%"  ><div align="center"> <input type="text" size="10" name="Nickname" id="Nickname1"/></div></td> 
    <td nowrap="" width="10%"  ><div align="center"><input type="text" size="8" name="Cleats" id="cleats1"/><div></td> 
    <td nowrap="" width="10%" > <div align="center"><input type="text" size="8"> <div></td> 
    <td nowrap="" width="8%"  ><div align="center"><input type="text"   size="4" name="Size" id="Size1"/></div></td> 
    
    <td nowrap="" width="10%"  > 
<!--input name="btnAdd" type="button" id="btnAdd" value="Add" onClick="Add('order-add-line.jsp')"--> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'delete')" value="Delete" id="btnDelete" name="btnDelete" style="visibility:hidden "/></td> 
  </tr> 
</tbody> 
</table> 
 
<script type="text/javascript"> 
function addOrderRow(tab,rowNum,colNum,obj,addType) 
        { 
var detailbody=document.getElementById(tab); 
var row = document.createElement("tr"); 
var newrow=obj.parentNode.parentNode.innerHTML; 
if(addType=='add'){ 
var row = detailbody.insertRow(); 
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ 
var cell=row.insertCell(); 
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; 
//如果表单中有值就清空 
for(var k=0;k<cell.childNodes.length;k++){ 
	if (cell.childNodes[k].type == 'text') { cell.childNodes[k].value = ''; } 
	if (cell.childNodes[k].type == 'textarea') { cell.childNodes[k].value = ''; } 
	if (cell.childNodes[k].type == 'checkbox') { cell.childNodes[k].checked = false; } 
	if (cell.childNodes[k].type == 'radio') { cell.childNodes[k].checked = false; } 
	if (cell.childNodes[k].type == 'select-multiple') { cell.childNodes[k].selectedIndex = -1; } 
	if (cell.childNodes[k].type == 'select-one') { cell.childNodes[k].selectedIndex = -1; } 
} 
//cell.innerHTML=arr[i]; 
} 

}else if(addType=='copy'){ 
//copy 
//detailbody.insertRow().insertCell().innerHTML = newrow;   ok 
var row = detailbody.insertRow(); 
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ 
var cell=row.insertCell(); 
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; 
} 
}else{ 
//delete 
if(confirm("Are you sure to delete this record?")){ 
    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
}else{ 
return false; 
} 
} 
//只显示最后一个add按钮 
var leg = detailbody.childNodes.length; 
if(leg>1){ 
for(var j=0;j<leg-2;j++){ 
document.getElementsByName("btnAdd")[j].style.visibility="hidden"; 
} 
  document.getElementsByName("btnAdd")[leg-2].style.visibility="visible"; 
  //document.getElementsByName("btnDelete")[0].style.visibility="hidden"; 
   } 
//显示除第一个外所有delete按钮 
if(leg>1){ 
  for(var j=1;j<leg-1;j++){ 
document.getElementsByName("btnDelete")[j].style.visibility="visible"; 
} 
} 
        } 
</script> 
</body> 

?

1 楼 liuboyu1991 2010-08-27  
java之爷爷
  相关解决方案