首页 > 网络编程 > JavaScript > javascript技巧 > js添加行

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

2008-07-22 23:05:40 作者：

发现我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>

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

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

您可能感兴趣的文章: