zoukankan      html  css  js  c++  java

  • 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>   
  • 相关阅读:
    jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法
    mysql限制update和delete必须加上where限制条件
    Node的express配置使用ejs模板
    mysql8用户管理
    c语言编译四大步
    windows系统安装gcc编译器----c/c++语言编译器
    c/c++语言开发工具Dev-cpp【推荐】
    c语言指针
    cmd切换代码页，切换字体，cmd不能输入中文
    windows8.1全角与半角切换快捷键
  • 原文地址：https://www.cnblogs.com/nbalive2001/p/1383102.html
Copyright © 2011-2022 走看看