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>   
  • 相关阅读:
    mysql 数据类型总结
    #微信小程序子传父 #小程序子组件向父组件传值 小程序子组件触发父组件中的事件
    #最近看到了一个写的很棒的系列文章专栏
    《MySQL45讲》读书笔记(四)：索引
    《MySQL45讲》读书笔记(六)：数据库事务概述
    《MySQL45讲》读书笔记(一)：三大日志概述
    Java基础篇(05)：函数式编程概念和应用
    数据采集组件：Flume基础用法和Kafka集成
    架构设计：数据服务系统0到1落地实现方案
    Java基础篇(04)：日期与时间API用法详解
  • 原文地址：https://www.cnblogs.com/nbalive2001/p/1383102.html
Copyright © 2011-2022 走看看