JS动态创建HTML对象

so_brave

JS动态创建HTML对象

1. <script type="text/javascript">
   
2. //一次最多只能插入10個城市的信息
   
3. //檢查新增城市的數目是否超過10，超過了就無法增加
   
4. function checkRowsLimit()
   
5. {
   
6. var rowLimit = 10;
   
7. var len=document.getElementById('inputarea').rows.length;
   
8. if(len==rowLimit)
   
9. {
   
10. alert('抱歉，一次只能添加10個城市的信息，請先保存后再新增');
    
11. return false;
    
12. }
    
13. else
    
14. {
    
15. return true;
    
16. }
    
17. }
    
18. 
    
19. function addNewRow()
    
20. {
    
21. var obj=document.getElementById('inputarea');
    
22. 
    
23. var row=obj.insertRow(-1);
    
24. var c0=row.insertCell(0);
    
25. c0.innerHTML='請輸入城市名稱';
    
26. c0.align='right';
    
27. 
    
28. var c1=row.insertCell(1);
    
29. c1.innerHTML='<input type="text" name="cityOne.name" style="margin-left:1px;"/>';
    
30. c1.align='left';
    
31. 
    
32. var c2=row.insertCell(2);
    
33. c2.innerHTML='<a href="javascript:void(0)" onclick="removeRow(this)">[刪除]</a>';
    
34. changeFlag = true;
    
35. try
    
36. {
    
37. comm_set_page_height();
    
38. }
    
39. catch (e)
    
40. {
    
41. }
    
42. }
    
43. function removeRow(fontobj)
    
44. {
    
45. if(confirm("確定刪除該項嗎?"))
    
46. {
    
47. var obj=document.getElementById('inputarea');
    
48. var n=fontobj.parentNode.parentNode.rowIndex;
    
49. obj.deleteRow(n);
    
50. }
    
51. }
    
52. </script>

复制代码

下面是页面的具体调用：

1. <table width="735" border="0" id="inputarea">
   
2. 
   
3. <tr>
   
4. 
   
5. <td align=right>請輸入城市名稱:</td>
   
6. 
   
7. <td align=left><input type="text" style="MARGIN-LEFT: 1px" name="cityOne.name"/></td>
   
8. <td><a href="#" onClick="if(checkRowsLimit()) {addNewRow();}"
   
9. title="点击后在上面添加的输入框">[添加条目]</a>
   
10. </td>
    
11. </tr>
    
12. 
    
13. </table>

复制代码

酸娃儿

楼主东西很好，以后常来往
小弟的帖子也来看看吧！
http://bbs.chinaunix.net/viewthr ... &extra=page%3D1