非常简单的JS可编辑表格，帮忙看下

很简单，鼠标单击学号列的时候可以编辑，点确定保存，取消恢复默认值
当前行处在编辑的状态的时候 点击其他行编辑的话  提示 确定保存当前修改内容(确定 取消)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>可编辑的表格 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.hideEle
{
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
    <br>
    <br>
    &nbsp;&nbsp;<h4>
        User</h4>
    <form action="www.163.com" method="post" id="form" onsubmit="at()">
    <table border="1" width="600" id='tb'>
        <tbody>
            <tr>
<th >
                    
                </th>
                <th width='300'>
                    学号
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr><td><input type="checkbox"></td>
                <td>000001</td>
                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>
            </tr>
           <tr><td><input type="checkbox"></td>
                <td>000002</td>
                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>
            </tr>
 <tr><td><input type="checkbox"></td>
                <td>000003</td>
                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>
            </tr>
 <tr><td><input type="checkbox"></td>
                <td>000003</td>
                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>
            </tr>
        </tbody>
       
    </table>
    </form>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <title>可编辑的表格 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    .hideEle
    {
    display: none;
    }
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    function shuru(td){
    ubd();
    $("#hc").val(td.html());
    td.empty();
    td.append("<input type='text'>");

    $("input[type=text]").bind('blur',function(){ 
    var text = $("input[type=text]"); 
    if(text!=null)
    if(confirm("确认更改")){
    sv(text);
    }else{
    qx();
    }
    });
    $("input[type=text]").focus();
    }
    function qd(){
    var text = $("input[type=text]"); 
    if(text!=null)
    if(confirm("确认更改")){
    sv(text);
    }
    }
    function qx(){
    var text = $("input[type=text]");
    var td = text.parent() 
    td.empty();
    td.append($("#hc").val());
    bd();
    }
    function sv(text){
    var td = text.parent(); 
    var zhi = text.val();
    td.empty();
    td.append(zhi);
    bd();
    }
    function bd(){
    $("table tr td:nth-child(2)").bind('click',function(){
       shuru($(this));
      });
    }
    function ubd(){
    $("table tr td:nth-child(2)").unbind('click');
    }
    $(document).ready(function(){
    bd(); 
    });
    </script>
    </head>
    <body>
        <br>
        <br><input type="hidden" id="hc">
        &nbsp;&nbsp;<h4>
            User</h4>
        <form action="www.163.com" method="post" id="form" onSubmit="at()">
        <table border="1" width="600" id='tb'>
            <tbody>
                <tr>
                    <th >
                       全选<input type="checkbox"> 
                    </th>
                    <th width='300'>
                        学号
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr><td ><input type="checkbox"></td>
                  <td >000001</td>
                     <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>
                </tr>
               <tr><td><input type="checkbox"></td>
                    <td >000002</td>
                     <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>
                </tr>
                 <tr><td><input type="checkbox"></td>
                    <td onClick="shuru">000003</td>
                     <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>
                </tr>
                 <tr><td><input type="checkbox"></td>
                    <td>000003</td>
                     <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>
                </tr>
            </tbody>
           
        </table>
        </form>
    </body>
    </html>
      

  2.   

    JS我不大会，JQ我就写过，原理简单，主要是语法吧。