动态添加表格行

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>table</title>
  6. <style>
  7. tr{
  8. background-color:#FFFF00;
  9. }
  10. td{
  11.     font-family: "宋体";
  12.     font-size: 24px;
  13.     font-style: italic;
  14.     font-weight: bold;
  15.     color: #999966;
  16. }
  17. </style>
  18. </head>
  19. <script src="js/kook.js">
  20. </script>
  21. <script>
  22. window.onload=(function(){
  23. var objTable=$('mytable');
  24. //alert(objTable);
  25. var objTr=objTable.insertRow(2);
  26. //debugger;
  27. var aText=new Array();
  28. for(var i=0;i<4;i++){
  29.     aText[i]=document.createTextNode(i);
  30. }
  31. //alert(aText.length);
  32. for(var i=0;i<aText.length;i++)
  33. {
  34. var oTd=objTr.insertCell(i);
  35. oTd.appendChild(aText[i]);
  36. }
  37. });
  38. </script>
  39. <body>
  40. <table id="mytable">
  41. <tr>
  42.   <td width="43">1</td>
  43.   <td width="41">2</td>
  44.   <td width="40">3</td>
  45.   <td width="55">4</td>
  46. </tr>
  47. <tr>
  48.   <td>2</td>
  49.   <td>3</td>
  50.   <td>4</td>
  51.   <td>5</td>
  52. </tr>
  53. <tr>
  54.   <td>3</td>
  55.   <td>4</td>
  56.   <td>5</td>
  57.   <td>6</td>
  58. </tr>
  59. <tr>
  60.   <td>4</td>
  61.   <td>5</td>
  62.   <td>6</td>
  63.   <td>7</td>
  64. </tr>
  65. </table>
  66. </body>
  67. </html>

你可能感兴趣的:(动态添加表格行)