------
如图显示页面：
要求：点击“添加明细”按钮，页面中自动生成如下图显示的动态行和列
实现上述功能的实例代码：
【body里的table代码】
1. <table width="100%" border="0" cellspacing="1" id="tt" bgcolor="#ffffff">
2.   <tr class="firstpage1">
3.   <td colspan="16"  align="left">
4.   </tr>
5.   <tr class="firstpage" >
6.     <td heightjavascript void 0 是什么意思="23" width="5%">序号</td>
7.     <td width="5%">交通工具</td>
8.     <td width="5%">出发地点</td>
9.     <td width="5%">抵达地点</td>
10.     <td width="5%">
11.         <a href="javascript:void(0)"  onclick="addNew()">添加明细</a>
12.     </td>
13.   </tr>
14.   </table>
实现上述功能的实例代码：
【body里的js代码】
1. <script type="text/javascript">
2. <!--
3.     var  i=0;
4.     var arr=new  Array('#cc99ff','#cc99ff');
5.     alert(arr);
6.       var count = 1;
7.     function addNew()
8.     {
9.          
10.         var order_id  = 2014;
11.         i++; 
12.         tr=document.all.tt.insertRow();
13.         tr.style.backgroundColor=arr[i%2];   
14.         tr.insertCell().innerHTML='<div  align=center>'+order_id+'</div>'; 
15.         tr.insertCell().innerHTML='<div  align=center>'+order_id+'</div>'; 
16.         tr.insertCell().innerHTML='<div  align=center><input  style=\"width:80px; height:20px;border:none\"  class=inputstyle  type=text maxlength=20  size=8  name=START_SITUS  class=border_index></div>'; 
17.         tr.insertCell().innerHTML='<div  align=center><input  style=\"width:80px; height:20px;border:none\"  class=inputstyle  type=text maxlength=20  size=8  name=ARRIVE_SITUS  class=border_index></div>'; 
18.         tr.insertCell().innerHTML="<a href=javascript:void(0)  class=\"shenpi2\" onclick=de
l('"+"tt"+count+"')>删除</a>"; 
19.         count++;
20.     }
21.
22.     //删除明细行 ...
23.     function  del(aa){
24.         document.all.tt.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex); 
25.        
26.     }
27. //-->
28. </script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。