Question

我在一些行上有很少的行，所以当点击td时，应该更改所有行的文本字段以及td中相同的值，当更新后进行了一些更新时应将其恢复为具有更新值的相同非编辑位置。

请为此提出任何解决方案

$(document).ready(function () {

    $(".g1").click(function () {
        var parent = $(this).parent();
        $(this).replaceWith("<input type='text' value='");
        parent.children(":text").focus();
        return false;
    });
    $(".g1 :text").live("blur", function () {
        $(this).replaceWith(this).val();
    });
});

Answer 1

首先更改html并删除输入，因为它们将在运行时添加

<table>
  <tr>
<td class="g1">some text
</td>
</tr>
<tr>
  <td class="g2">some text
</td>
</tr>
<tr>
  <td class="g3">some text
</td>
</tr>
</table>

然后将脚本更改为：

$(document).ready (function() {

 $("td").click (function() {
  $(this).html("<input type='text' class='editText' value='"+$(this).text()+"' />");
  $(this).children(":text").focus();
  return false;
 });
 $("table").on("blur","td input:text", function() {
  $(this).replaceWith ($(this).val());
 });
});

最后，删除输入的css：

td.edit input { display: block; }

tr td{border:1px #000 solid; background-color:lightblue; padding:3px; 
}

我不太确定你想要什么，但这是演示： http://jsfiddle.net/8x4qp/6/

Answer 2

试试吧 HTML

<table>
  <tr>
    <td class="g1 can_edit">some text can edit
    </td>
    </tr>
    <tr>
      <td class="g2">some text
    </td>
    </tr>
    <tr>
      <td class="g3 can_edit">some text
    </td>
  </tr>
</table>

的javascript

$(document).ready (function() {
    $(".can_edit").click(function(){
        if($(this).find("input").length==0){
            var currentText = $(this).text();
            $(this).html("<input id='tamp_input' type='text' class='edit' value='"+currentText+"' />");
            $("#tamp_input").blur(function(){
                $(this).parent().html($(this).val());
            });
        }
    });
});

在这里演示http://jsfiddle.net/haduythuan/8x4qp/4/

Answer 3

此代码可能会帮助您

$(".g1").click (function() {
   var pdata = $(this).children("p").text();
   $(this).children("input").show().val(pdata);
   $(this).children("p").hide();
   $(this).children(":text").focus();
});

$("input[type='text']").on("blur", function() {
   $(this).hide();
   $(this).siblings("p").show();    
   $(this).siblings("p").text($(this).val());
});

演示链接：http://jsfiddle.net/8x4qp/11/

Answer 4

您的代码存在一些问题。当您使用replaceWith时，您将替换整个g1 TD，而不仅仅是文本。因此，您创建了一个无效的DOM，input直接位于tr内。另一个结果是不再有g1元素，因此绑定g1 :text处理程序的选择器blur不存在;因此，在完成元素编辑后，没有任何事情发生。

将HTML更改为：

<tr>
    <td class="g1"><span>some text</span>
        <input type="text" class="edit" />
    </td>
</tr>

这会添加一个单独的span元素来包含文本。

添加以下CSS：

td.edit span {
    display: none;
}

因此在编辑文本时会隐藏范围。

并将JS更改为：

$(document).ready(function () {

    $(".g1 span").click(function () {
        $(this).parent().addClass('edit');
        $(this).siblings(":text").focus();
        return false;
    });
    $(".g1 :text").blur(function () {
        $(this).siblings("span").text($(this).val());
        $(this).parent().removeClass('edit');
    });
});

这只是切换edit类，而不是替换元素。

DEMO

Jquery td到文本字段问题

4 个答案: