• 表格 DOM 操作


     1     window.onload = function() {
     2         var oTb = document.getElementById("tb1");
     3 
     4         //隔行变色
     5         for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
     6             oTb.tBodies[0].rows[i].style.background = i % 2 ? "#ccc" : "";
     7             oTb.tBodies[0].rows[i].index = i;
     8 
     9             oTb.tBodies[0].rows[i].onmouseover = function() {
    10                 this.style.background = "red";
    11             };
    12             oTb.tBodies[0].rows[i].onmouseout = function() {
    13                 this.style.background = this.index % 2 ? "#ccc" : "";;
    14             };
    15         }
    16 
    17         //增加删除行
    18         var btnAdd = document.getElementById("btnAdd");
    19         oTb.nowId = oTb.tBodies[0].rows.length + 1;
    20         btnAdd.onclick = function() {
    21             var oTr = document.createElement("tr");
    22             var oTd = null;
    23 
    24             oTd = document.createElement("td");
    25             oTd.innerHTML = oTb.nowId++;
    26             oTr.appendChild(oTd);
    27 
    28             oTd = document.createElement("td");
    29             oTd.innerHTML = txtAdd.value;
    30             oTr.appendChild(oTd);
    31 
    32             oTd = document.createElement("td");
    33             oA = document.createElement("a");
    34             oA.innerHTML = "删除";
    35             oA.href = "javascript:void(0)"
    36             oA.onclick = function() {
    37                 oTb.tBodies[0].removeChild(this.parentNode.parentNode);
    38             };
    39             oTd.appendChild(oA);
    40             oTr.appendChild(oTd);
    41 
    42             oTb.tBodies[0].appendChild(oTr);
    43         };
    44 
    45         //搜索
    46         var btnSearch = document.getElementById("btnSearch");
    47         var txtSearch = document.getElementById("txtSearch");
    48         btnSearch.onclick = function() {
    49             for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
    50                 var tbValue = oTb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
    51                 var txtValue = txtSearch.value.toLowerCase();
    52                 var arr = txtValue.split(' ');
    53                 var bFound = false;
    54                 for (var j = 0; j < arr.length; j++) {
    55                     if (tbValue.search(arr[j]) != -1) {
    56                         bFound = true;
    57                         break;
    58                     }
    59                 }
    60                 if (bFound)
    61                     oTb.tBodies[0].rows[i].style.background = "#234233";
    62             }
    63         };
    64 
    65         //排序
    66         var btnSort = document.getElementById("btnSort");
    67 
    68         //点击之后顺序逆序切换排序
    69         var isAsc = true;
    70 
    71         btnSort.onclick = function() {
    72 
    73             //1. 转换成数组
    74             var arr = [];
    75             for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
    76                 arr[i] = oTb.tBodies[0].rows[i];
    77             }
    78 
    79             //2. 数组排序
    80             arr.sort(function(tr1, tr2) {
    81                 return isAsc ?
    82                     parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML) :
    83                     parseInt(tr2.cells[0].innerHTML) - parseInt(tr1.cells[0].innerHTML);
    84             });
    85 
    86             //3. 重新插入
    87             for (var i = 0; i < arr.length; i++) {
    88                 oTb.tBodies[0].appendChild(arr[i]);
    89             }
    90 
    91             //取反
    92             isAsc = !isAsc;
    93         };
    94     };
  • 相关阅读:
    解决证书过期而无法连接到或启动HyperV虚拟机的问题
    Hyperv相关补丁(错误号87 Virtual Machine Management服务无法启动)
    Formula One Report学习总结
    漂亮的Form皮肤
    FarPoint Design BorderEditor(边框设计)
    保存图片到SQL Server
    发布一个的Web日期选择控件及源码(其中的js代码来自于Microsoft CRM)
    自谈音乐之道
    SQL Server 存储过程的分页
    教你9招最有效防电脑辐射方法
  • 原文地址:https://www.cnblogs.com/HuoAA/p/5074156.html
Copyright © 2020-2023  润新知