`

jquery实现可编辑的表格

jQueryCSSJavaScriptHTML 
阅读更多

html代码 

<html>
<head>
    <title>Jquery的编辑表格实例</title>
    <link type="text/css" rel="stylesheet" href="css/edit.css">
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/edit.js"></script>
    </head>
<body>
<table >
    <tbody>
    <tr>
        <td>12313</td>
        <td>12asdf3</td>
    </tr>
    </tbody>
</table>

</body>
</html>

 

jslib/edit.js代码 

$(document).ready(function() {
    var tds = $("td");
    tds.click(tdclick);
});
function tdclick() {
    //保存内容
    var td = $(this);
    var text = td.text();
    //清空td里面
    td.html("");
    //建立一个文本框
    var input = $("<input>");
    input.keyup(function(event) {//键盘按下弹起的事件
        //判断是否是回车
        var ev = event || window.event;
        var ecode = ev.keyCode;
        if (ecode == 13) {
            var inputNode = $(this);
            var inputText = inputNode.val();
            var tdNode = inputNode.parent();
            tdNode.html(inputText);
            td.click(tdclick);
        }
    });
    //设置文本框的值
    input.attr("value", text);
    //文本框的值保存到td
    td.append(input);
    //清除点击事件
    td.unbind("click");
}
 
分享到：
| flowplayer视频播放器的简单使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics