js table

  1. <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>   
  3. <head>   
  4. <title> 表格操作 </title>   
  5. <meta name="Generator" content="EditPlus">   
  6. <meta name="Author" content="">   
  7. <meta name="Keywords" content="">   
  8. <meta name="Description" content="">   
  9. </head>   
  10.   
  11. <body>   
  12.   
  13. </body>   
  14. <script language="javascript">   
  15. //添加表格   
  16. function loadTable()   
  17. {   
  18.     var tb = document.createElement("table");   
  19.     var rowTitle = tb.insertRow();   
  20.     var cellTitle1= rowTitle.insertCell();   
  21.     var cellTitle2= rowTitle.insertCell();   
  22.     cellTitle2.colSpan = 2;   
  23.     cellTitle2.align = "right";   
  24.     cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";   
  25.     cellTitle1.innerHTML = "<span>添加</span>";   
  26.     loadSelect(cellTitle1);   
  27.   
  28.     for(var i = 0; i < 10; i++){   
  29.         var row = tb.insertRow();//添加行   
  30.         loadCells(row, i);   
  31.     }   
  32.     //设置属性   
  33.     tb.id = "tb";   
  34.     tb.align="center";   
  35.     tb.cellPadding = 1;   
  36.     tb.bgColor="#ffffee";   
  37.     tb.style.borderWidth = "1px";   
  38.     tb.style.borderCollapse = "collapse";   
  39.     tb.style.borderStyle = "solid";   
  40.     tb.rules = "ALL";//应用全部   
  41.     tb.borderColor = "#000000";   
  42.     document.body.appendChild(tb);   
  43. }   
  44. //添加单元格   
  45. function loadCells(rowObj,m)   
  46. {   
  47.     var cell1 = rowObj.insertCell();//添加单元格   
  48.     var cell2 = rowObj.insertCell();//添加第二个单元格   
  49.     var cell3 = rowObj.insertCell();   
  50.   
  51.     cell1.innerHTML = "&nbsp;" + parseInt(m + 1) + "&nbsp;";   
  52.     cell2.innerHTML = "<input type='text' name='txt_name' value=''>";   
  53.     cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'>&nbsp;×&nbsp;</span>";   
  54. }   
  55. //添加select框   
  56. function loadSelect(obj)   
  57. {   
  58.     var s = document.createElement("select");   
  59.     s.id = "sel_count";   
  60.     s.name = s.id;   
  61.     for(var i = 1; i <= 10; i++){   
  62.         var opt = new Option(i+"行",i);   
  63.         s.options.add(opt);   
  64.     }   
  65.     obj.appendChild(s);   
  66. }   
  67. //删除行   
  68. function delRow(obj)   
  69. {   
  70.     var tr = obj.parentElement.parentElement;   
  71.     var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody   
  72.   
  73.     tb.deleteRow(tr.rowIndex);   
  74. }   
  75. //选择好的个数的行，传入单元格   
  76. function addRow(obj)   
  77. {   
  78.     var tr = obj.parentElement;   
  79.     var cnt = (tr.cells[0]).children[1].value;//个数   
  80.     var tb = tr.parentElement.parentElement;   
  81.   
  82.     var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行   
  83.     var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号   
  84.   
  85.     for(var i = 0; i < cnt; i++){   
  86.         var newRow = tb.insertRow();   
  87.         loadCells(newRow,parseInt(maxIndex + i));   
  88.     }   
  89.        
  90. }   
  91.   
  92. loadTable();   
  93. </script>   
  94. </html>   
posted @ 2009-02-03 14:13  Mose  阅读(315)  评论(0)  编辑  收藏  举报