可以这样 在td里面在嵌套一个span标签用于存放数据,当单击span标签的时候 在替换成input标签就可以了
参考代码如下
html代码: <table> <tr> <td>1</td> <td>2</td> <td><input type="button" class="edit" value="编辑"/></td> </tr> </table> js代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> $(document).ready(function () { $(".edit").live("click", function () { var t_this = $(this); var list = $(t_this).parent().parent().find("td:lt(2)"); var html = encodeURIComponent($(t_this).parent().parent().html()); $.each(list, function (i, obj) { $(obj).html("<input type='text' value='" + $(obj).text() + "'/>"); }); $(t_this).parent().html("<input type='button' value='保存' class='save'/><input type='button' html='" + html + "' value='取消' class='cancel'/>"); }); $(".save").live("click", function () { var t_this = $(this); var list = $(t_this).parent().parent().find("td :input[type='text']"); $.each(list, function (i, obj) { $(obj).parent().html($(obj).val()); }); $(t_this).parent().html("<input type='button' value='编辑' class='edit'/>"); }); $(".cancel").live("click", function () { $(this).parent().parent().html(decodeURIComponent($(this).attr("html"))); }); });