鼠标点击表格项就可以编辑 Jquery 

<!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>可以编辑的表格</title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("tbody tr").filter(":even").css("background-color", "Silver");

            $("tbody td").click(function () {
                if ($(this).children("input").length > 0) {
                    return false;
                }
                var tdObj = $(this);//拿到当前的td对象
                var text = tdObj.html();//得到当前td的当前值
                var inputTxt = $("<input type='text' />");//将input对象包装成jquery对象
                inputTxt.css("border-width", "0");//设置input对象的css
                inputTxt.css("width", $(this).width());
                inputTxt.css("font-size", "15px");
                inputTxt.val($(this).html());
                $(this).html("");
                inputTxt.appendTo($(this));//jquery方法将子节点加入到父节点
                inputTxt.trigger('foucs').trigger('select'); //jquery方法调用document的focus和select方法
                inputTxt.click(function () {
                    return false; //input是td的子节点，当点击它的时候会触发父节点td的click事件
                });
                inputTxt.keyup(function (event) {
                    var keyCode = event.which;
                    if (keyCode == 13) {
                        tdObj.html($(this).val());
                    }
                    if (keyCode == 27) {
                        tdObj.html(text);
                    }
                });
                inputTxt.blur(function () {
                    tdObj.html($(this).val());
                });
            });

        });
   
    </script>

    <style type="text/css">
        table{
            width:400px;
            border:1px solid black;
            border-collapse:collapse;/*消除单元格与单元格之间的间隙 */
         }
        table td{
         border:1px solid black;
         width:50%;
         }
        table th
        {
          border:1px solid black;
          width:50%;          
        }
        tbody th
        {
           background:orange;
        }
    </style>
   
</head>

<body>

<table>
    <thead><tr><th colspan="2">鼠标点击表格项就可以编辑</th></tr></thead>
    <tbody>
       <tr><th>学号</th><th>姓名</th></tr>
       <tr><td>000001</td><td>张三</td></tr>
       <tr><td>000002</td><td>李四</td></tr>
       <tr><td>000003</td><td>王五</td></tr>
       <tr><td>000004</td><td>赵六</td></tr>
    </tbody>

</table>
</body>
</html>

 

 

posted on 2013-10-02 21:13  鱼东鱼  阅读(416)  评论(0)  编辑  收藏  举报

导航