zoukankan      html  css  js  c++  java
  • js初级练习2(增删改)

      1 <!DOCTYPE html>
      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></title>
      6     <style type="text/css">
      7         div
      8         {
      9             border:1px solid red;
     10             height:20px;
     11             width:300px;
     12             margin:10px auto;
     13             text-align:center;
     14         }
     15         table
     16         {
     17             
     18             width:300px;
     19             margin:0 auto;
     20             border:1px solid #0094ff;
     21             border-collapse:collapse;
     22         }
     23         td
     24         {
     25             border:1px solid #0094ff;
     26             text-align:center;
     27 
     28         }
     29     </style>
     30     <script type="text/javascript">
     31         
     32         window.onload = function () {
     33             /////////////
     34             //添加菜单按钮
     35             document.getElementById("btnAddmenu").onclick = function () {
     36                 //取到用户输入
     37                 var inputtxt = prompt("请输入", "西瓜");
     38                 if (inputtxt.trim() == "")
     39                     return alert("输入合适菜单");
     40                 var optionobjects = document.getElementById("foodList").children;
     41                 for (var i = 0; i < optionobjects.length; i++) {
     42                     if (optionobjects[i].innerHTML.trim() == inputtxt.trim())
     43                         return alert("重复菜单");
     44                 }
     45                 //create一个option
     46                 var optioncreate = document.createElement("option"); 
     47                 optioncreate.innerHTML = inputtxt;
     48                 //将该option添加给select
     49                 document.getElementById("foodList").appendChild(optioncreate);
     50             }
     51             //////////////
     52             //新增订单
     53             var indexcount = 0;
     54             //对象存储td
     55             var tdobject = new Object();  
     56             
     57 
     58             document.getElementById("btnAddTr").onclick = function () {
     59                 //给对象添加属性
     60                 indexcount++;
     61                 tdobject.td1 =indexcount+ "<input type='checkbox' class='ck01'/>";
     62                 tdobject.menu = document.getElementById("foodList").value;
     63                 tdobject.state = "<a href='#' onclick='Deltr(this);'>删除</a>  <a href='#' class='edit'>编辑</a>";
     64                 var trcreate = document.createElement("tr");
     65                 //创建tr元素,遍历对象,每个属性给到新创建的td,并将td加给tr
     66                 for (var i in tdobject) {
     67                     var tdcreate = document.createElement("td");
     68                     tdcreate.innerHTML = tdobject[i];
     69                     trcreate.appendChild(tdcreate);
     70                 }
     71                 document.getElementById("tbid01").appendChild(trcreate);
     72                 //添加新元素,要将这些元素中的onclick事件一起注册
     73                 //这里注册编辑a标签 事件
     74                 var editobjets = document.getElementsByClassName("edit");
     75                 for (var j = 0; j < editobjets.length; j++) {
     76                     editobjets[j].onclick = function () {
     77                         //得到行
     78                      var  trobject= this.parentNode.parentNode;
     79                         //替换行第二列为txt
     80                      var td02= trobject.children[1];
     81                       oldinnerhtml= td02.innerHTML; 
     82                      td02.innerHTML = "<input type='Text' value='" + oldinnerhtml + "'/>";
     83                      td02.children[0].focus();
     84                      td02.children[0].select();
     85                         //替换第三列a标签为保全,取消
     86                      var td03 = trobject.children[2];
     87                      td03.innerHTML = "<a href='#' onclick='tdSave(this);'>保全</a> <a href='#' onclick='tdCancel(this);'>取消</a>"
     88                     }
     89                 }
     90             }
     91             //////////
     92             //全选反选全删
     93             document.getElementById("ckall").onclick = function () {
     94                 var ckobjects = document.getElementsByClassName("ck01");
     95                 for (var i = 0; i < ckobjects.length; i++) {
     96                     ckobjects[i].checked = this.checked;
     97                 }
     98             }
     99             //选择性多删
    100             document.getElementById("DeleteAll").onclick = function () {
    101                 var ckobjects = document.getElementsByClassName("ck01");
    102                 for (var i = ckobjects.length-1; i >=0; i--)
    103                 {
    104                     if (ckobjects[i].checked == true)
    105                     {
    106                         var trobject = ckobjects[i].parentNode.parentNode;
    107                         trobject.parentNode.removeChild(trobject);
    108                     }
    109                 }
    110             }
    111           
    112         }
    113 
    114         //结束onload
    115 
    116         //单行删!!!!当触发a标签的点击事件时,a标签不在onload之内,应在a标签加进来的时候立即加上onclick事件
    117             function Deltr(aObj) {
    118                 var trobj = aObj.parentNode.parentNode;
    119                 trobj.parentNode.removeChild(trobj);
    120             }
    121         //保全菜单
    122             function tdSave(tdobj) {
    123                 //得到tr 需要保全的td
    124                 var trobj = tdobj.parentNode.parentNode;
    125                 var td2 = trobj.children[1]
    126                 ////
    127                 var tdinput = td2.children[0].value;
    128 
    129                 //替换td的innerHTML
    130                 td2.innerHTML = tdinput;
    131                 //替换a标签
    132                 td2.parentNode.children[2].innerHTML = "<a href='#' onclick='Deltr(this);'>删除</a>  <a href='#' class='edit'>编辑</a>";
    133                 //同样插入新元素a标签,需要一并将onclick事件注册给它,这样其实代码很多冗余,建议还是在标签内绑定onclick事件
    134                 var editobjets = document.getElementsByClassName("edit");
    135                 for (var j = 0; j < editobjets.length; j++) {
    136                     editobjets[j].onclick = function () {
    137                         //得到行
    138                         var trobject = this.parentNode.parentNode;
    139                         //替换行第二列为txt
    140                         var td02 = trobject.children[1];
    141                          oldinnerhtml = td02.innerHTML;
    142                         td02.innerHTML = "<input type='Text' value='" + oldinnerhtml + "'/>";
    143                         td02.children[0].focus();
    144                         td02.children[0].select();
    145                         //替换第三列a标签为保全,取消
    146                         var td03 = trobject.children[2];
    147                         td03.innerHTML = "<a href='#' onclick='tdSave(this);'>保全</a> <a href='#' onclick='tdCancel(this);'>取消</a>"
    148                     }
    149                 }
    150             }
    151 
    152         //取消
    153             function tdCancel(tdobj)
    154             {
    155                 //取到全局变量存储的保全前的值
    156                // alert(oldinnerhtml);
    157                 //将该值替换this的parernode.parentnode.children[1].children[0].innerhtml
    158                 tdobj.parentNode.parentNode.children[1].innerHTML = oldinnerhtml;
    159                 //替换a标签
    160                 tdobj.parentNode.parentNode.children[2].innerHTML = "<a href='#' onclick='Deltr(this);'>删除</a>  <a href='#' class='edit'>编辑</a>";
    161                 //同样插入新元素a标签,需要一并将onclick事件注册给它,这样其实代码很多冗余,建议还是在标签内绑定onclick事件
    162                 var editobjets = document.getElementsByClassName("edit");
    163                 for (var j = 0; j < editobjets.length; j++) {
    164                     editobjets[j].onclick = function () {
    165                         //得到行
    166                         var trobject = this.parentNode.parentNode;
    167                         //替换行第二列为txt
    168                         var td02 = trobject.children[1];
    169                         oldinnerhtml = td02.innerHTML;
    170                         td02.innerHTML = "<input type='Text' value='" + oldinnerhtml + "'/>";
    171                         td02.children[0].focus();
    172                         td02.children[0].select();
    173                         //替换第三列a标签为保全,取消
    174                         var td03 = trobject.children[2];
    175                         td03.innerHTML = "<a href='#' onclick='tdSave(this);'>保全</a> <a href='#' onclick='tdCancel(this);'>取消</a>"
    176                     }
    177                 }
    178             }
    179     </script>
    180 </head>
    181 
    182 
    183 
    184 
    185 
    186 
    187 
    188 
    189 
    190 
    191 
    192 
    193 
    194 
    195 
    196 
    197 
    198 
    199 
    200 
    201 <body>
    202     <div>
    203         <input type="button"  value="新增菜单" id="btnAddmenu"/>
    204         <label>菜单:</label>
    205         <select id="foodList">
    206         <option>蛋炒饭</option>
    207         <option>火锅</option>
    208         <option>红烧肉</option>
    209         </select>
    210        
    211     </div>
    212     <div><input type="button" value="加订单"  id="btnAddTr"/></div>
    213     <table id="tbid01">
    214         <tr>
    215             <td>序号</td>
    216             <td>菜名</td>
    217             <td>编辑</td>
    218 
    219         </tr>
    220     </table>
    221     <div><input type="checkbox" id="ckall"/>
    222         <a href="#" id="DeleteAll">删除选中</a>
    223     </div>
    224 </body>
    225 </html>
    代码
  • 相关阅读:
    WCF 第四章 绑定 在多个绑定上暴露一个服务契约
    WCF 第五章 行为 事务跨操作事务流
    WCF 第五章 导出并发布元数据(服务行为)
    WCF 第五章 行为 通过配置文件暴露一个服务行为
    WCF 第五章 不支持会话的绑定的默认并发和实例
    WCF 第五章 并发和实例(服务行为)
    WCF 第五章 行为 总结
    WCF 第四章 绑定 绑定元素
    WCF 第五章 行为 事务之选择一个事务协议OleTx 或者WSAT
    WCF 第四章 绑定 比较各种绑定的性能和可扩展性
  • 原文地址:https://www.cnblogs.com/zhanying/p/4104559.html
Copyright © 2011-2022 走看看