首页 » Web开发 » 日志

DOM的一些操作

 

javascript代码
  1. <script type="text/javascript">  
  2. <!--  
  3. //创建form  
  4. var _form=document.createElement('form');  
  5. _form.setAttribute('name','myform');  
  6. _form.setAttribute('action','');  
  7. _form.setAttribute('method','post');  
  8.  
  9. //创建表  
  10. var _table=document.createElement('table');  
  11. _table.setAttribute('border', '1');  
  12. _table.setAttribute('borderColor', 'red');  
  13. _table.setAttribute('width', '300');  
  14. _table.setAttribute('height', '100');  
  15.  
  16. //创建一行  
  17. var _tr=_table.insertRow(_table.rows.length);  
  18. // _tr.rowIndex //当前行的行号  
  19.  
  20. //创建一列  
  21. var _td=_tr.insertCell(_tr.cells.length);  
  22.  
  23. //给<td>添加文本  
  24. _txt=document.createTextNode('Intitul');  
  25. _td.appendChild(_txt);  
  26. alert(_td.contentEditable=true);  
  27.  
  28. //创建一个checkbox  
  29. var _input=document.createElement('input');  
  30. _input.setAttribute('type', 'checkbox');  
  31. _input.setAttribute('name', 'mycheck');  
  32. _input.setAttribute('value', 'ddddd');  
  33. _td.appendChild(_input);  
  34. _input.defaultChecked=true;  
  35.  
  36. //创建一个radio  
  37. var _input=document.createElement('input');  
  38. _input.setAttribute('type', 'radio');  
  39. _input.setAttribute('name', 'myradio');  
  40. _input.setAttribute('value', 'ddddd');  
  41. _input.defaultChecked=true;  
  42. _td.appendChild(_input);  
  43.  
  44. //给checkbox添加  
  45. var _label=document.createElement('label');  
  46. _label.setAttribute('for', _input);  
  47. _label.appendChild(document.createTextNode('my check label'));  
  48. _td.appendChild(_label);  
  49.  
  50. //创建一个button  
  51. _input=document.createElement('button');  
  52. _input.setAttribute('type', 'submit');  
  53. _input.setAttribute('name', 'mysubmit');  
  54. _input.setAttribute('value', 'my submit');  
  55. _input.setAttribute('size', '130');  
  56. _td.appendChild(_input);  
  57.  
  58. //把表格附加到父容器内  
  59. _form.appendChild(_table);  
  60. document.body.appendChild(_form);  
  61. // -->  
  62. </script> 

另外添几个表格的操作

xhtml代码
  1. <form id="testForm" name="testForm"> 
  2.     <!--文本框，用来输入要删除的行的序号-->      
  3.     <input id="rowtodelete" size="2" name="rowtodelete" type="text" maxlength=&quot;2&quot; value="1">   
  4.     <!--通过onclick调用theTable.deleteRow ()来删除行-->      
  5.     <!--其中theTable.rows.length> 0表示存在行-->      
  6.     <input type="button" value="删除行" onclick="if (theTable.rows.length>0)      
  7.     theTable.deleteRow (document.testForm.rowtodelete.value);"> 
  8.       
  9.     <!-- 上面的rowindex可以用$(trid).rowIndex来获得 -->      
  10.     <!--文本框，用来输入要在其后插入的行的序号-->      
  11.     <input id="rowtoinsert" size="2" name="rowtoinsert" type="text" maxlength="2" value="1"> 
  12.       
  13.     <!--通过onclick调用theTable.insertRow()来插入行-->      
  14.     <input type="button" value="插入行" onclick=&quot;theTable.insertRow(document.testForm.rowtoinsert.value);"> 
  15. </form> 
xhtml代码
  1. <form id="testForm" name="testForm"> 
  2.     <!--通过onclick调用theTable.deleteTHead()来删除表头-->      
  3.     <input type="button" onclick="theTable.deleteTHead();" value="删除<thead>" /> 
  4.       
  5.     <!--通过onclick调用theTable.deleteTFoot()来删除脚注-->      
  6.     <input type="button" onclick="theTable.deleteTFoot();" value="删除<tfoot>" /> 
  7.       
  8.     <!--通过onclick调用theTable.deleteCaption()来删除标题-->      
  9.     <input type="button" onclick="theTable.deleteCaption();" value="删除<caption>" /> 
  10. </form> 

 

Tags: javascript
On Web开发 @ 2008-03-03 09:56:00 | By yhustc 转播到腾讯微博 分享到QQ空间
上一篇: 08年的第一篇日志
下一篇: 精英评论

相关日志推荐
基于jquery的随机软键盘
使用Javascript在特定的地方拦截鼠标右键
ajax中文乱码问题解决(PHP)
AJAX与PHP传递中文数据

0 条留言

发表评论

  
  
   (点击图片更换验证码)
点击刷新验证码