zoukankan      html  css  js  c++  java
  • js添加删除行和双击变文本框

    代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
        
    <title>js添加删除行和双击变文本框</title> 
        
    <style type="text/css"> 
        *
    { 
            font-size
    :12px; 
        
    } 
        #myTable
    { 
            background
    :#D5D5D5; 
            color
    :#333333; 
        
    } 
         
        #myTable tr
    { 
            background
    :#F7F7F7; 
        
    } 
        #myTable tr th
    { 
            height
    :20px; 
            padding
    :5px; 
        
    } 
        #myTable tr td
    { 
            padding
    :5px; 
        
    } 
        
    </style> 
        
    <script type="text/javascript"> 
        
    function $(obj){ 
            
    return document.getElementById(obj); 
        } 
         
        
    var num = 0
        
    function row(id){ 
            
    //构造函数 
            this.id = $(id); 
        } 
        row.prototype 
    = { 
            
    //插入行 
            insert:function(){ 
                num 
    = num + 1
                
    var newTr = this.id.insertRow(-1); 
                
    var td_1 = newTr.insertCell(0); 
                
    var td_2 = newTr.insertCell(1); 
                
    var td_3 = newTr.insertCell(2); 
                td_1.innerHTML 
    = num; 
                td_2.innerHTML 
    = "脚本之家 www.jb51.net"
                td_3.innerHTML 
    = "<input type='button' onclick='delRow(this)' value='删除' >"
            }, 
            
    //删除行 
            del:function(obj){ 
                
    var i = obj.parentNode.parentNode.rowIndex; 
                
    this.id.deleteRow(i); 
            } 
        } 
           
        
    function addRow(){ 
            
    var row2 = new row("myTable"); 
            row2.insert(); 
        } 
         
        
    function delRow(obj){  
            
    var row1 = new row("myTable"); 
            row1.del(obj); 
        } 
         
        
    var inputItem; // 输入框句柄 
        var activeItem; // 保存正在编辑的单元格 
         
        
    //转成文本 
        function changeToText(obj){ 
            
    if( obj && inputItem ) { 
                
    // 如果存在正在编辑的单元格, 则取消编辑状态, 并将编辑的数据保存起来 
                var str = " "
                
    if(inputItem.value != "")  
                    str 
    = inputItem.value; 
                obj.innerText 
    = str;    
            } 
        } 
         
        
    //转成编辑 
        function changeToEdit(obj){ 
             
    if!inputItem ) { 
                  inputItem 
    = document.createElement('input'); 
                  inputItem.type 
    = 'text'
                  inputItem.style.width 
    = '100%'
             } 
            
    // inputItem.style.display = ''; 
             inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上 
             obj.innerHTML = ''// 清空单元格的数据 
             obj.appendChild(inputItem); 
             inputItem.focus(); 
             activeItem 
    = obj; 
        } 
         
         
        
    //双击时文本变成文本框 
        document.ondblclick = function(){ 
            
    if(event.srcElement.tagName.toLowerCase() == "td"){ 
                
    if(!inputItem){ 
                    inputItem 
    = document.createElement("input"); 
                    inputItem.type 
    = "text"
                    inputItem.style.width 
    = "100%"
                } 
                changeToText(); 
                changeToEdit(event.srcElement); 
            }
    else
                event.returnValue 
    = false
                
    return false
            } 
        } 
         
        
    //单击时文本框变成文本 
        document.onclick = function(){ 
            
    if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem) 
                
    return
            
    else 
                changeToText(activeItem); 
        } 
        
    </script> 
    </head> 
    <body> 
    <input type="button" onclick="addRow()" value="插入一行" /> 
    <table id="myTable" border="0" cellpadding="0" cellspacing="1"> 
    <tr><th>编号</th><th>姓名</th><th>操作</th></tr> 
    </table> 
    </body> 
    </html> 
    【转】

  • 相关阅读:
    Understanding about Baire Category Theorem
    Isometric embedding of metric space
    Convergence theorems for measurable functions
    Mindmap for "Principles of boundary element methods"
    Various formulations of Maxwell equations
    Existence and uniqueness theorems for variational problems
    Kernels and image sets for an operator and its dual
    [loj6498]农民
    [luogu3781]切树游戏
    [atAGC051B]Three Coins
  • 原文地址:https://www.cnblogs.com/derrck/p/1902097.html
Copyright © 2011-2022 走看看