js添加删除行和双击变文本框的脚本_javascript技巧-js教程-PHP中文网

js添加删除行和双击变文本框的脚本_javascript技巧

WBOY

发布： 2016-05-16 19:02:19

原创

877 人浏览过

<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> 
 
 
<input type="button" onclick="addRow()" value="插入一行"> 
<table id="myTable" border="0" cellpadding="0" cellspacing="1"> 
<tr>
<th>编号</th>
<th>姓名</th>
<th>操作</th>
</tr> 
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]