js下为表格内部动态添加行的代码

　　未添加行之前：

js下为表格内部动态添加行的代码

　　添加行之后：

js下为表格内部动态添加行的代码

　　演示代码:

<!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> 
<title>给表格内部动态添加行</title> 
<style type="text/css"> 
.tableStyle 
{ 
border-collapse: collapse; 
width:100%; 
} 
td 
{ 
font-size:12px; 
height:25px; 
border:1px solid #CCD5E8; 
} 
.btn { 
font-size:12pt; color: #003399; 
border: 1px #003399 solid; 
color:#006699; 
border-bottom: #93bee2 1px solid; 
border-left: #93bee2 1px solid; 
border-right: #93bee2 1px solid; 
border-top: #93bee2 1px solid; 
background-color: #e8f4ff; 
cursor: pointer; 
font-style: normal ; 
width:20px; 
height:22px; 
font-family:Verdana;font-family:Georgia;_font-family:Tahoma; 
padding:0 10px 1px;padding:3px 3px 1px;_padding:0 4px 1px; 
line-height:18px;line-height:14px;_line-height:16px; 
} 
</style> 
</head> 
<body> 
<table class="tableStyle" id="OwnershipStructure"> 
<tr> 
<td width="15%" rowspan="2" id="StructureLeft1"> 
标的企业 
 
股权结构 </td> 
<td width="15%" rowspan="2" id="StructureLeft2">股东人数：人 </td> 
<td width="30%"> 
前十名出资人的名称<strong>（做成动态，填几个显示几个）</strong> </td> 
<td width="30%">出资比例 </td> 
</tr> 
<tr id="StructureRight"> 
<td> 
<input id="Text1" type="text" /></td> 
<td> 
<input id="Text2" type="text" /><input id="btnAddRow" class="btn" 
onclick="AddStructureRow()" type="button" value="+" /> 
</td> 
</tr> 
<tr> 
<td>评估机构</td><td></td><td></td><td></td> 
</tr> 
<tr><td>评估机构</td><td></td><td></td><td></td> 
</tr> 
</table> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%20%0D%0Afunction%20AddStructureRow()%20%0D%0A%7B%20%0D%0Avar%20obj%3Ddocument.getElementById(%22OwnershipStructure%22)%3B%20%0D%0Avar%20tr%3D%20obj.rows%5B%22StructureRight%22%5D%3B%20%0D%0A%2F%2Falert(tr.rowIndex)%3B%20%0D%0Avar%20count%3Ddocument.getElementById(%22StructureLeft1%22).getAttribute(%22rowspan%22)%3B%20%0D%0Adocument.getElementById(%22StructureLeft1%22).setAttribute(%22rowSpan%22%2CparseInt(count)%2B1)%3B%20%0D%0Adocument.getElementById(%22StructureLeft2%22).setAttribute(%22rowSpan%22%2CparseInt(count)%2B1)%3B%20%0D%0A%2F%2F%E6%8F%92%E5%85%A5%E8%A1%8C%20code%20form%20www.%20.net%20%0D%0Avar%20tr%20%3Dobj.insertRow(tr.rowIndex%2B1)%3B%20%0D%0Avar%20trId%3D%22trStructure%22%2Btr.rowIndex%3B%20%0D%0Atr.setAttribute(%22id%22%2CtrId)%3B%20%0D%0Avar%20td0%20%3D%20tr.insertCell(0)%3B%20%0D%0Atd0.setAttribute(%22align%22%2C%22left%22)%3B%20%0D%0A%2F%2Ftd0.setAttribute(%22colSpan%22%2C%224%22)%3B%20%0D%0Atd0.innerHTML%20%3D%20%22%3Cinput%20ID%3D'txtName'%20type%3D'text'%2F%3E%20%22%3B%20%0D%0Avar%20td1%20%3D%20tr.insertCell(1)%3B%20%0D%0Atd1.setAttribute(%22align%22%2C%22left%22)%3B%20%0D%0A%2F%2Ftd1.setAttribute(%22colSpan%22%2C%223%22)%3B%20%0D%0Atd1.innerHTML%20%3D%20%22%3Cinput%20ID%3D'txtName'%20type%3D'text'%2F%3E%3Cinput%20id%3D'btnDelRow'%20class%3D'btn'%20type%3D'button'%20value%3D'-'%20onclick%3D'DelStructureRow(%22%2Btr.rowIndex%2B%22)'%2F%3E%22%3B%20%0D%0A%7D%20%0D%0Afunction%20DelStructureRow(rowIndex)%20%0D%0A%7B%20%0D%0Avar%20obj%3Ddocument.getElementById(%22OwnershipStructure%22)%3B%20%0D%0Aobj.deleteRow(rowIndex)%3B%20%0D%0Avar%20count%3Ddocument.getElementById(%22StructureLeft1%22).getAttribute(%22rowspan%22)%3B%20%0D%0Adocument.getElementById(%22StructureLeft1%22).setAttribute(%22rowSpan%22%2CparseInt(count)-1)%3B%20%2F%2FrowSpan%20%E4%B8%8D%E8%A6%81%E5%86%99%E6%88%90rowspan%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%9C%A8IE6%20%E4%B8%8EIE7%E4%B8%8B%E4%BC%9A%E6%9C%89%E9%97%AE%E9%A2%98%20%0D%0Adocument.getElementById(%22StructureLeft2%22).setAttribute(%22rowSpan%22%2CparseInt(count)-1)%3B%20%0D%0A%7D%20%0D%0A%2F%2FEnd---%E8%82%A1%E4%B8%9C%E5%87%BA%E8%B5%84%E4%BA%BA%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程