模拟双击事件

对于生成的一个表格
想达到如下效果
1、双击单元格 编辑单元格，已实现
2、回车或失去焦点后退出编辑状态，已实现
3、回车后转到下一个单元格，没有实现
我想模拟单元格双击事件，但没有成功，大侠帮一下
以下来自网上下载的一个例子，修改了一下，增加了td的ID属性  <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery的跨浏览器可编辑表格</title>
<link rel="stylesheet" type="text/css" href="css/editTable.css" media="all"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head><body>
<table>
     <thead>
         <tr>
             <th colspan="2">鼠标点击表格就可以编辑</th>
            </tr>
        </thead>
        <tbody>
         <tr>
             <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
             <td id="s1">000001</td>
                <td>张三</td>
            </tr>
            <tr>
             <td id="s1">000002</td>
                <td>李四</td>
            </tr>
            <tr>
             <td id="s3">000003</td>
                <td>王五</td>
            </tr>
            <tr>
             <td id="s4">000004</td>
                <td>赵六</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    
$(document).ready(function()
{
    //找到学号这一列的所有单元格
    //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
    var numTd = $("tbody  td:even");
    var id = numTd[0].id;    //单击这些td时，创建文本框
    numTd.dblclick(function()
    {
        //创建文本框对象
        var inputobj = $("<input type='text'>");
        //获取当前点击的单元格对象
        var tdobj = $(this);
        //获取单元格中的文本
        var text = tdobj.html();        //如果当前单元格中有文本框，就直接跳出方法
        //注意：一定要在插入文本框前进行判断
        if (tdobj.children("input").length > 0)
        {
            return false;
        }
        //清空单元格的文本
        tdobj.html("");        inputobj.css("border", "0")
.css("font-size", tdobj.css("font-size"))
.css("font-family", tdobj.css("font-family"))
.css("background-color", tdobj.css("background-color"))
.css("color", "#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);        inputobj.get(0).select();
        //阻止文本框的点击事件
        inputobj.click(function()
        {
            return false;
        });        //阻止文本框的双击击事件
        inputobj.dblclick(function()
        {
            return false;
        });
        //处理文本框上回车和esc按键的操作
        //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
        inputobj.keyup(function(event)
        {
            //获取当前按键的键值
            //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
            var keycode = event.which;
            //处理回车的情况
            if (keycode == 13)
            {
                //获取当前文本框的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdobj.html(inputtext);
                //alert(inputtext);
                //获取下一个单元格
                //alert(id);
                var nextId = parseInt(id.substr(1)) + 1;
                //alert(nextId);
                $("#s" + nextId).dblclick;
            }
            //处理esc的情况
            if (keycode == 27)
            {
                //将td中的内容还原成text
                tdobj.html(text);
            }
        });        //失去效点
        inputobj.blur(function(event)
        {            //获取当前文本框的内容
            var inputtext = $(this).val();
            //将td的内容修改成文本框中的内容
            tdobj.html(inputtext);
        });    });
});/*Code2*/
body{
font-size: 14px;
}
table{
color: #4F6B72; 
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}th{
width: 50%;
border: 1px solid #C1DAD7;
}
td{
width: 50%;
border: 1px solid #C1DAD7;
}
/*Code2*/
a{
color: #C75F3E;
}
需要下载jquery.1.3.2 min 版,

解决方案 »

  1.   

    把dbclick单独成一个函数，回车的时候调用这个函数就可以了
    function click(){
    }tr.dblclick=click;if (keycode == 13){
    click();
    }
      

  2.   

    ok.你第二个id写重复了
    另外jq的事件触发了没用，只好换了<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery的跨浏览器可编辑表格</title>
    <style type="text/css">
    /*Code2*/
    body{
        font-size: 14px;
    }
    table{
        color: #4F6B72; 
        border: 1px solid #C1DAD7;
        border-collapse: collapse;
        width: 400px;
    }th{
        width: 50%;
        border: 1px solid #C1DAD7;
    }
    td{
        width: 50%;
        border: 1px solid #C1DAD7;
    }
    /*Code2*/
    a{
        color: #C75F3E;
    }</style>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
        //找到学号这一列的所有单元格
        //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
        var numTd = $("tbody  td:even");
        var id = numTd[0].id;    //单击这些td时，创建文本框
        numTd.dblclick(function()
        {
            //创建文本框对象
            var inputobj = $("<input type='text'>");
            //获取当前点击的单元格对象
            var tdobj = $(this);
            //获取单元格中的文本
            var text = tdobj.html();        //如果当前单元格中有文本框，就直接跳出方法
            //注意：一定要在插入文本框前进行判断
            if (tdobj.children("input").length > 0)
            {
                return false;
            }
            //清空单元格的文本
            tdobj.html("");        inputobj.css("border", "0")
                    .css("font-size", tdobj.css("font-size"))
                    .css("font-family", tdobj.css("font-family"))
                    .css("background-color", tdobj.css("background-color"))
                    .css("color", "#C75F3E")
                    .width(tdobj.width())
                    .val(text)
                    .appendTo(tdobj);        inputobj.get(0).select();
            //阻止文本框的点击事件
            inputobj.click(function()
            {
                return false;
            });        //阻止文本框的双击击事件
            inputobj.dblclick(function()
            {
                return false;
            });
            //处理文本框上回车和esc按键的操作
            //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
            inputobj.keydown(function(event)//这里keydown会更好
            {
                //获取当前按键的键值
                //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
                var keycode = event.which;
                //处理回车的情况
                if (keycode == 13)
                {
                    //获取当前文本框的内容
                    var inputtext = $(this).val();
                    //将td的内容修改成文本框中的内容
                    tdobj.html(inputtext);
                    //alert(inputtext);
                    //获取下一个单元格
                    //alert(id);
                    var nextId = parseInt(id.substr(1)) + 1;
                    //alert(nextId);
                    //$("#s" + nextId).dblclick;
                    var next=$("#s"+nextId)[0];//alert(next);
                    fireEvent(next,"dblclick");
                }
                //处理esc的情况
                if (keycode == 27)
                {
                    //将td中的内容还原成text
                    tdobj.html(text);
                }
            });
            //失去效点
            inputobj.blur(function(event)
            {            //获取当前文本框的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdobj.html(inputtext);
            });    });
    });
    var fireEvent=function(el,ename) {//触发指定事件
    if(el.fireEvent){//IE中 
    el.fireEvent("on"+ename);   
    }   else    {   
    var e=document.createEvent('MouseEvent');   
    e.initEvent(ename,false,false);   
    el.dispatchEvent(e);   
    }
    }
    </script>
    </head><body>
        <table>
            <thead>
                <tr>
                    <th colspan="2">鼠标点击表格就可以编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <td id="s1">000001</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td id="s2">000002</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td id="s3">000003</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td id="s4">000004</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
      

  3.   

    sohighthesky，谢谢
    好像我改的这行代码还有点问题，麻烦帮看看
        var id = numTd[0].id;始终能到s2,怎么获取当前单元格的的ID呢还有一个问题，如何判断是否到了最后一行，如果是则结束编辑状态
      

  4.   

    ok，关键在这里var next=tdobj.parent().next().children("td")[0];//parent()找到tr，然后下一行，然后第一个td
    if(next)//如果最后一行就为空了，不会执行了
        fireEvent(next,"dblclick");
    另外将       inputobj[0].focus();
            inputobj.get(0).select();
    这两句放到最后
    全文
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery的跨浏览器可编辑表格</title>
    <style type="text/css">
    /*Code2*/
    body{
        font-size: 14px;
    }
    table{
        color: #4F6B72; 
        border: 1px solid #C1DAD7;
        border-collapse: collapse;
        width: 400px;
    }th{
        width: 50%;
        border: 1px solid #C1DAD7;
    }
    td{
        width: 50%;
        border: 1px solid #C1DAD7;
    }
    /*Code2*/
    a{
        color: #C75F3E;
    }</style>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
        //找到学号这一列的所有单元格
        //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
        var numTd = $("tbody  td:even");
        var id = numTd[0].id;    //单击这些td时，创建文本框
        numTd.dblclick(function()
        {
            //创建文本框对象
            var inputobj = $("<input type='text'>");
            //获取当前点击的单元格对象
            var tdobj = $(this);
            //获取单元格中的文本
            var text = tdobj.html();        //如果当前单元格中有文本框，就直接跳出方法
            //注意：一定要在插入文本框前进行判断
            if (tdobj.children("input").length > 0)
            {
                return false;
            }
            //清空单元格的文本
            tdobj.html("");        inputobj.css("border", "0")
                    .css("font-size", tdobj.css("font-size"))
                    .css("font-family", tdobj.css("font-family"))
                    .css("background-color", tdobj.css("background-color"))
                    .css("color", "#C75F3E")
                    .width(tdobj.width())
                    .val(text)
                    .appendTo(tdobj);        
            //阻止文本框的点击事件
            inputobj.click(function()
            {
                return false;
            });        //阻止文本框的双击击事件
            inputobj.dblclick(function()
            {
                return false;
            });
            //处理文本框上回车和esc按键的操作
            //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
            inputobj.keydown(function(event)//这里keydown会更好
            {
                //获取当前按键的键值
                //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
                var keycode = event.which;
                //处理回车的情况
                if (keycode == 13)
                {
                    //获取当前文本框的内容
                    var inputtext = $(this).val();
                    //将td的内容修改成文本框中的内容
                    tdobj.html(inputtext);
                    //alert(inputtext);
                    //获取下一个单元格
                    //alert(id);
                    var nextId = parseInt(id.substr(1)) + 1;
                    //alert(nextId);
                    //$("#s" + nextId).dblclick;
                    //var next=$("#s"+nextId)[0];//alert(next);
                    var next=tdobj.parent().next().children("td")[0];//parent()找到tr，然后下一行，然后第一个td
                    if(next)//如果最后一行就为空了，不会执行了
    fireEvent(next,"dblclick");
                }
                //处理esc的情况
                if (keycode == 27)
                {
                    //将td中的内容还原成text
                    tdobj.html(text);
                }
            });
            //失去效点
            inputobj.blur(function(event)
            {            //获取当前文本框的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdobj.html(inputtext);
            });
            
            inputobj[0].focus();
            inputobj.get(0).select();    });
    });
    var fireEvent=function(el,ename) {//触发指定事件
    if(el.fireEvent){//IE中 
    el.fireEvent("on"+ename);   
    }   else    {   
    var e=document.createEvent('MouseEvent');   
    e.initEvent(ename,false,false);   
    el.dispatchEvent(e);   
    }
    }
    </script>
    </head><body>
        <table>
            <thead>
                <tr>
                    <th colspan="2">鼠标点击表格就可以编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <td id="s1">000001</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td id="s2">000002</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td id="s3">000003</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td id="s4">000004</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>