点编辑的时候编辑学号,然后编辑变、删除变成保存、取消
都可实现
自己逻辑有问题
不知道怎么做
求大家帮忙<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</HEAD><BODY>
<br><br>
&nbsp;&nbsp;<h4>User</h4>
</hr>
<form action="www.163.com" method="post" id="form" onsubmit="at()">
<table border="1" width="600"> 
<tbody>
<tr>
<th>学号</th>
<th>操作</th>
</tr>
<tr>
<td>000001</td>
<th><a href="#" onclick="edit();" id="edit">aaaaaaa</a>|删除</th>
</tr>
<tr>
<td>000002</td>
<th><a href="#" onclick="edit();" id="edit">编辑</a>|删除</th>
</tr>
</tbody>
</table>
</form></BODY><script type="text/javascript">
$(function(){
var numTd = $("#edit");
numTd.click(function() {
var tdObj = $(this);
var text = tdObj.html(); 
tdObj.html("");
var inputObj = $("<input type='text'>").val(text).appendTo(tdObj);
inputObj.trigger("focus").trigger("select");
inputObj.click(function() {
return false;
});
});
});
</script>
</HTML>

解决方案 »

  1.   

    放两个标签,一个用于显示,一个用于编辑(隐藏),Click编辑,隐藏显示的,显示隐藏的
      

  2.   


     <table border="1" width="600"> 
            <tbody>
                <tr>
                    <th>学号</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>000001<input type="text" value="000001" style="display:none"/></td>
                    <th><a href="#" onclick="edit();" id="edit">aaaaaaa</a>|删除</th>
                </tr>
                <tr>
                    <td>000002<input type="text" value="000002" style="display:none"/></td>
                    <th><a href="#" onclick="edit();" id="edit">编辑</a>|删除</th>
                </tr>
            </tbody>
        </table>
    <script>
    </script>之后的就是控制显示/隐藏/取值的问题了
      

  3.   


    这种方法不合适啊,太过简单,而却我的数据量很大的,不可能每个都要写一个
    我想通过Javascript去处理
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>New Document </title>
        <style type="text/css">
            .hideEle
            {
                display: none;
            }
        </style>    <script type="text/javascript" src="jquery/jquery.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 width='300'>
                        学号
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr>
                    <td>
                        000001
                    </td>
                    <th>
                        <div>
                            <a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
                        <div class="hideEle">
                            <a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
                    </th>
                </tr>
                <tr>
                    <td>
                        000002
                    </td>
                    <th>
                        <div>
                            <a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
                        <div class="hideEle">
                            <a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
                    </th>
                </tr>
            </tbody>
        </table>
        </form>
    </body><script type="text/javascript">    function trim(str) { //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }    $(function() {
            $("#tb tr:gt(0)").each(function() {
                var firstTd = $(this).children(":eq(0)");
                var text = trim(firstTd.html());
                firstTd.html($("<span class='oldContent'></span>").text(text));
                $("<input type='text' class='update  hideEle' />").val(text).appendTo(firstTd);
            });
            $("a.edit").click(function(e) { return edit(e); });
            $("a.remove").click(function(e) { return remove(e); });
            $("a.save").click(function(e) { return save(e); });
            $("a.cancel").click(function(e) { return cancel(e); });
        });    function edit(btn) {
            btn = btn.srcElement || btn.target;
            $(btn).parent().hide();          //编辑,删除所在的层隐藏
            $(btn).parent().next().show();   //保存,取消所在的层显示
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            var text = firstTd.html();
            var text = firstTd.find(".oldContent").hide().html();
            firstTd.find(".update").show().val(text);
            return false;
        }    function remove(btn) {
            btn = btn.srcElement || btn.target;
            $(btn).parents("tr").remove();
            return false;
        }    function save(btn) {
            btn = btn.srcElement || btn.target;
            $(btn).parent().hide();
            $(btn).parent().prev().show();
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            var text = firstTd.find(".update").hide().val();
            firstTd.find(".oldContent").show().html(text);
            return false;
        }    function cancel(btn) {
            btn = btn.srcElement || btn.target;
            $(btn).parent().hide();
            $(btn).parent().prev().show();
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            firstTd.find(".oldContent").show();
            firstTd.find(".update").hide();
            return false;
        }</script></html>
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>可编辑的表格 </title>
        <style type="text/css">
            .hideEle
            {
                display: none;
            }
        </style>    <script type="text/javascript" src="jquery/jquery.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 width='300'>
                        学号
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr>
                    <td>
                        000001
                    </td>
                    <th>
                        <div>
                            <a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
                        <div class="hideEle">
                            <a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
                    </th>
                </tr>
                <tr>
                    <td>
                        000002
                    </td>
                    <th>
                        <div>
                            <a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
                        <div class="hideEle">
                            <a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
                    </th>
                </tr>
            </tbody>
            <tfoot>
                <tr style="text-align: right;">
                    <th colspan="2"> 
                        <a href="#" id='add'>增加</a>
                    </th>
                </tr>
            </tfoot>
        </table>
        </form>
    </body><script type="text/javascript">    function trim(str) { //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
        var $backTr;
        var currentSaveBtn;
        var currentCancelBtn;
        $(function() {
            $("#tb tbody tr:gt(0)").each(function() {
                var firstTd = $(this).children(":eq(0)");
                var text = trim(firstTd.html());
                firstTd.html($("<span class='oldContent'></span>").text(text));
                $("<input type='text' class='update  hideEle' />").val(text).appendTo(firstTd);
            });
            $("a.edit").click(function(e) { var btn = e.srcElement || e.target; return edit(btn); });
            $("a.remove").click(function(e) { var btn = e.srcElement || e.target; return remove(btn); });
            $("a.save").click(function(e) { var btn = e.srcElement || e.target; return save(btn); });
            $("a.cancel").click(function(e) { var btn = e.srcElement || e.target; return cancel(btn); });
            $backTr = $("#tb tbody tr:eq(1)").clone(true);
            $backTr.find(".oldContent").html("未命名");
            $("#add").click(function() {
                return add();
            });
        });    function add() {
            $backTr.clone(true).appendTo("#tb tbody");
        }    function edit(btn) {
            confirmOperat();
            $(btn).parent().hide();          //编辑,删除所在的层隐藏
            $(btn).parent().next().show();   //保存,取消所在的层显示
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            var text = firstTd.html();
            var text = firstTd.find(".oldContent").hide().html();
            firstTd.find(".update").show().val(text);
            currentCancelBtn = secTd.find("a.cancel");
            currentSaveBtn = secTd.find("a.save");
            return false;
        }    function remove(btn) {
            confirmOperat();
            currentCancelBtn = null;
            currentSaveBtn = null;
            $(btn).parents("tr").remove();
            return false;
        }    function save(btn) {
            currentCancelBtn = null;
            currentSaveBtn = null;
            $(btn).parent().hide();
            $(btn).parent().prev().show();
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            var text = firstTd.find(".update").hide().val();
            firstTd.find(".oldContent").show().html(text);
            return false;
        }    function cancel(btn) {
            currentCancelBtn = null;
            currentSaveBtn = null;
            $(btn).parent().hide();
            $(btn).parent().prev().show();
            var secTd = $(btn).closest("th");
            var firstTd = secTd.prev();            //取得 第一格
            firstTd.find(".oldContent").show();
            firstTd.find(".update").hide();
            return false;
        }    function confirmOperat() {
            if (currentCancelBtn) {
                if (confirm("是否保存当前修改?")) {
                    save(currentSaveBtn);
                } else {
                    cancel(currentCancelBtn);
                }
            }
        }</script></html>
    大概试了一下,不知道对不对。
      

  6.   

    觉得那句要注释?
    找个jquery的api,对着看一下吧,都 是上面的方法