jQuery 可编辑的表格实现

可编辑的表格，指的是，在单元格上单击后，该格数据可以编辑，回车后，通过ajax保存，实现无刷新编辑。原理：在点击单元格后，把该格内容替换成一个input标签,当用户编辑完按回车后，再通过ajax把编辑后的内容发送给服务器，把单元格内容换成编辑后的内容。 html代码:

<!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>无标题文档</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../js/music/my.js"></script>
</head>

<body>
<table width="622" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="129">歌名</td>
    <td width="127">歌手</td>
    <td width="152">排序</td>
    <td width="165">删除</td>
  </tr>
    <tr id="content" musicId="2">
    <td>那些年</td>
    <td>胡夏ff</td>
    <td>1</td>
    <td><button class="del">删除</button></td>
  </tr>
  </table>
</body>
</html>

my.js:

$(function(){
    $("#content td").click(function(){
        //id为content的元素的td子元素被点击时执行
        var musicId = $(this).parent().attr("musicId");
        //读取musicId
        var td = $(this);
        if ((td.children("input").length > 0) || td.index() == 3) {//如果已经是input,或者是删除那一格，不执行操作
            return;
        }
        var input = $("");
        //定义一个input标签
        var text = td.html();
        //保存原先值 
        td.html("");
        //清空
        input.val(text).css("border", "none").width(td.width()).css("font-size", "16px").appendTo(td);
        //设置默认值为原先的值，无边框，与td同宽,字体大小16px,加到td里
        input.trigger("focus").trigger("select");
        //获取焦点，并选中
        var argName = "";
        switch (td.index()) {
            //index方法最出当前被点中被几列
            case 0:
                argName = "musicName";
                break;
            case 1:
                argName = "singer";
                break;
            case 2:
                argName = "sort";
        }
        //根据点第几列，确定参数名
        input.keyup(function(event){
            var keycode = event.which;
            //取键值,回车为13,esc为27
            if (keycode == 27) {
                td.html(text);
                //设回原来的值
            }
            if (keycode == 13) {
                var newValue = $(this).val();
                //取出经编辑的值
                if (td.index() == 2) {
                    if (!isInteger(newValue)) {
                        alert("排序必须是整数");
                        $(this).val(text);
                        return false;
                    }
                }
                td.html(newValue);
                
                var arg = {};
                arg[argName] = newValue;
                arg['musicId'] = musicId;
                $.post("edit_ajax.php", arg);
                //ajax发送更新指令
            }
        });
    });
    $("button.del").click(function(){
        //class为del的button点击时执行
        var musicId = $(this).parent().parent().attr("musicId");
        $(this).parent().parent().remove();
        //移除该行
        var arg = {};
        arg["action"] = "del";
        arg['musicId'] = musicId;
        $.post("edit_ajax.php", arg);
        //ajax发送删除指令
    });
    
});

function isInteger(str){
    //判断是否为整数
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
}