zoukankan      html  css  js  c++  java
  • 动态添加和删除表格行

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     2 <html>
     3     <head>
     4         <title></title>
     5         <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
     6         <meta name="ProgId" content="VisualStudio.HTML">
     7         <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
     8         <script language="javascript">
     9         <!--
    10             var i=1;
    11             function rowAdd()
    12             {
    13                 i=i+1;
    14                 var oldTable=document.getElementById("myTable");
    15                 var newTr=oldTable.insertRow(i);
    16                 var newTd0=newTr.insertCell(0);
    17                 var newTd1=newTr.insertCell(1);
    18                 
    19                 newTd0.innerHTML="<INPUT id='" + i +"' type='checkbox' name='" + i + "'>";
    20                 newTd1.innerText="" + i + "";
    21                 
    22                 newTd0.align="center";
    23             }
    24             function rowDel()
    25             {
    26                 
    27                     //document.getElementById("myTable").rows(i).removeNode();
    28                     var cc = document.getElementsByTagName("input");
    29                     for(var j=0;j<cc.length;j++)
    30                     {
    31                         if(cc[j].type=="checkbox")
    32                         {
    33                             if(cc[j].checked==true)
    34                             {
    35                                 if(i>=2)
    36                                 {
    37                                     cc[j].checked=false;
    38                                     cc[j].parentElement.removeNode();
    39                                     cc[j].parentElement.removeNode();//.removeNode();
    40                                     i=i-1;
    41                                 }
    42                                 else
    43                                 {
    44                                     alert("不能继续删减条目!");
    45                                 }
    46                                 //alert("DDD");
    47                                 //var t=document.getElementById("myTable");
    48                                 //t.deleteRow[index];
    49                             }
    50                         }
    51                     }
    52                     
    53                 
    54             }
    55         
    56         
    57         //-->
    58         </script>
    59     </head>
    60     <body>
    61     
    62     <table><tr><td><INPUT id="Button1" type="button" value="添加行" name="Button1" onclick="rowAdd()">
    63         <INPUT id="Button2" type="button" value="删除行" name="Button2" onclick="rowDel()"></td></tr></table>
    64         <table id="myTable" align="center" border="1" bgcolor="#00ffcc">
    65             <tr>
    66                 <td width="80" height="20" align="center">选择</td>
    67                 <td width="80" height="20"></td>
    68             </tr>
    69             <tr>
    70                 <td width="80" height="20" align="center"><INPUT id="Checkbox1" type="checkbox" name="Checkbox1"></td>
    71                 <td width="80" height="20"></td>
    72             </tr>
    73         </table>
    74         
    75     </body>
    76 </html>
    77 
  • 相关阅读:
    火狐URL编码问题
    Asp.net动态关键字
    charindex ,PATINDEX,contains,FREETEXT用法
    PanGu词库批量添加关键词
    Dictionary SortedList HashSet List用法
    hubbledotnet查询速度慢的问题
    asp.net 页面static变量问题
    String.Concat和String.Format用法
    .net显示今天农历的代码
    存储过程用户登录
  • 原文地址:https://www.cnblogs.com/wengnet/p/351252.html
Copyright © 2011-2022 走看看