在线等 jquery 如何把table中的一行变成可编辑的

Posted 2023-02-28

现在有效果图是这样的，当我点击修改，将变成input款。我现在已经可以取到值了，但是不知道接下来该怎么做。
我的点击事件代码
$(".updBtn").click(function()
var xt=jQuery(this).closest("tr").find("td").eq(1);
xt.text();
);

思路：点击按钮后，如果单元格内容不是可编辑状态，就将单元格替换为文本框，内容为当前单元格内容；再次点击即单元格内容已经是可编辑的文本框，就将单元格内容显示为文本框的值。详细说明及实例演示如下：

1、HTML结构：给出一个示例表格

<table>

    <tr><td>1</td><td>2</td><td><input type="button" value="编辑"></td></tr>

    <tr><td>2</td><td>5</td><td><input type="button" value="编辑"></td></tr>

    <tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>

    <tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>

</table>

2、jquery代码：

$(function()

    $("input:button").click(function()

        str = $(this).val()=="编辑"?"确定":"编辑";  

        $(this).val(str);   // 按钮被点击后，在“编辑”和“确定”之间切换

        $(this).parent().siblings("td").each(function()  // 获取当前行的其他单元格

            obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框

            if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑

                $(this).html("<input type='text' value='"+$(this).text()+"'>");

            else   // 如果已经存在文本框，则将其显示为文本框修改的值

                $(this).html(obj_text.val()); 

        );

    );

); 

3、效果演示：

参考技术A 大体的思路说一下：
1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：
var tdvalue=$(this).val();
$(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：
$(this).html($("tempinput").val());
3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。本回答被提问者和网友采纳