使用Javascript动态增加，删除表格（使用DHTML对象模型）

icheng

浏览: 831380 次
性别:
来自: 珠海

最近访客更多访客>>

u012363178

lylyhi

col_cafe

leifj

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1696)

社区版块

存档分类

2012-01 ( 10)
2011-12 ( 48)
2011-11 ( 52)
更多存档...

来自:http://esffor.javaeye.com/blog/168191

///----------------------单行的增加和删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=GB18030">
<META name="GENERATOR" content="IBM WebSphere Studio">
<TITLE>cfbcard.html</TITLE>
</HEAD>

<SCRIPT language="JavaScript">
var j_1 = 1;
function add_row_family(){
newRow=document.all.family.insertRow(-1)

newcell=newRow.insertCell()
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<input type='text' name='familyname"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
newcell.innerHTML="<SELECT name='thesistogether"+j_1+"'>"+
" <option value='请选择'>"+
" 请选择"+
" </option>"+
" <option value='1'>"+
" 111"+
" </option>"+
" <option value='2'>"+
" 222"+
" </option>"+
" <option value='3'>"+
" 333"+
" </option>"+
" <option value='4'>"+
" 444"+
" </option>"+
" <option value='5'>"+
" 555"+
" </option>"+

"</SELECT>";
for(var i = 0;i<12;i++){
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
newcell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
}

newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<a href='javascript:delTableRow(/""+1+"/")'>删除</a>";
newcell.innerHTML="<input type='button' value='删除' onClick='deleteCurrentRow()'>";

j_1++;
document.all.j_1.value=j_1;
document.all.family.focus();
}

function deleteCurrentRow()//刪除当前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.family.deleteRow(currRowIndex);//table10--表格id
}

</script>

</table>
</form>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////多行的增加，减少

<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<script language="javascript">
function $(id) {
return document.getElementById(id);
}
</script>
</HEAD>
<body bgcolor=#EFFFF5 leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0>
<center>
<center>

<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr bgcolor=#d0d0d0>
<td width=9 background=''> </td>
<td class=content height=100 valign=top> <table width=100% border=0 cellspacing=2 cellpadding=2> <tr>
<td>
<form action="into.php" method="post" enctype="multipart/form-data" name="articleinsert" id="articleinsert">
<A id=addattachlink onClick="newnode = $('kao').cloneNode(true); $('articleinsert').appendChild(newnode)" href="#">[增加] </A>

<A id=addattachlink onClick="$('articleinsert').childNodes.length > 4 ? $('articleinsert').removeChild($('articleinsert').lastChild):0;" href="#">[减少] </A>

<table border=0 width=100% cellPadding=4 cellSpacing=1 id="kao">
<tr bgcolor=#38C972 align=center>
<td nowrap> </td>
</tr>
<tr bgcolor=#9FF1B8 align=center>
<td> <table width="100%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td width="24%">
<div align="right"> </div> </td>
<td width="76%"></td>
</tr>
<TBODY id=attachbody>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">目的地： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="place" type="text" class="input" id="place" size="50"> </td>
</tr>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">公里数： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="km" type="text" class="input" id="km" size="50"> </td>
</tr>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">的士费： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="taxi" type="text" class="input" id="taxi" size="50"> </td>
</tr>
</TBODY>

</table>

<input name="word" type="hidden" id="word" value=""> </td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input name="Submit" type="submit" class="button" value="确定"> 　
<input name="Submit22" type="reset" class="button" value="重填">
<input name="Submit33" type="button" value="删除" onClick="$('articleinsert').childNodes.length > 4 ? $('articleinsert').removeChild($('articleinsert').lastChild):0;">
</div> </td>
</tr>
</table> </form> </td>
</tr>
</table>
<table border=1 width=100% cellspacing=0 cellpadding=1 bgcolor=#38C972>
<tr height=22> <td> </td> </tr>
</table>
</td> </tr> </table> </tr> </table>
</center> </center>
</BODY>
</HTML>