JQuery可编辑表格

用JQuery写一个可编辑表格，具体思想是：点击insert按钮后，在表格中追加文本输入框，输入完成，检测到失去焦点事件后将文本输入框替换成表格内容，用户想再次编辑时，检测到click事件重新将表格内容替换成文本输入框。这是我写的程序，在替换的处理上好像不对，请大家帮帮忙。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#insert").bind("click", function(){
$input1=$("<input type='text' class='input'/>");
$input2=$("<input type='text' class='input'/>");

$col1=$("<td></td>")
.append($input1);

$col2=$("<td></td>")
.append($input2);

$row=$("<tr></tr>")
.append($col1)
.append($col2);
$("table").append($row);

$(".input")
.css("border", 0)
.css("width", $("td").width())
.css("font-size", $("td").css("font-size"));

$(".input").blur(function(){
var info = $(this).val();
$(this).parent().replaceWith("<td class='fake'>"+info+"</td>");
});

$(".fake").click(function(){
var info = $(this).text();
$input = $("<td><input type='text' class='input' value='"+info+"'></td>");
$(this).parent().replaceWith($input);
});
});
});
</script>
<style>
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;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody> <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 id="six">赵六</td>
</tr>
</tbody>
</table>
<input type="button" id="insert" value="insert" />
</body>
</body>
</html>

解决方案 »

  1.   


    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
            <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
            <script type="text/javascript">
                $(function(){
    $('#insert').click(function(){
    var s = '<tr><td><input /></td><td><input /></td></tr>';
    $('tbody').append(s);
    })
    $('tbody :input').live('blur', function(){
    $(this).parent().html( this.value );
    return false;
    })
    $('td').live('click', function(){
    if( !$(this).find(':input').length ){
    $(this).html('<input value="'+this.innerHTML+'" />');
    $(this).find(':input').focus();
    }
    })
                });
            </script>
            <style>
                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%; height:30px; line-height:30px;
    border: 1px solid #C1DAD7;
                }
            </style>
        </head>
        <body>
            <table>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                    </tr>
                </thead>
                <tbody>                <tr>
                        <td>000001</td>
                        <td>123</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>
            <input type="button" id="insert" value="insert" />
        </body>
        </body>
    </html> </body>
    </html>这个意思？
      

  2.   

    谢谢，原来可以用live函数解决这个问题