您的位置：首页 > Web前端 > JavaScript

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

2010-12-10 11:13 141 查看

代码

<!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>
【转】

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航