用文本框替换表格单元格,读取键入的值,并使用jquery用新值替换表格单元格

时间:2011-03-27 09:35:23

标签: php jquery

我是Jquery的新手,正在使用PHP和Jquery开展一个小项目。下面是表格单元格。我想用文本框替换此单元格并读取用户输入的值并使用此新值恢复原始单元格(替换单元格)。我不知道如何用Jquery做到这一点。  任何帮助都非常感谢。

<td><a href="#"><?php echo money_format('%.2n', $Cashup['actual_cash']); ?></a></td>

谢谢, 巴斯卡尔

1 个答案:

答案 0 :(得分:0)

我假设你的例子中你想暂时替换a(你不想替换td,表格会很有趣。)

这是一个快速版本:

$("#theTable").delegate("td > a", "click", function(event) {
  var a, parent, input, doneLink;

  // The `a` has been clicked; cancel the action as
  // we're handling it
  event.preventDefault();
  event.stopPropagation();

  // Remember it and its parent
  a = $(this);
  parent = a.parent();

  // Insert an input in front of it, along with a done link
  // because blur can be problematic
  input = $("<input type='text' size='10'>");
  input.insertBefore(a);
  input.blur(doneHandler);
  doneLink = $("<a href='#'>done</a>");
  doneLink.insertBefore(a);
  doneLink.click(doneHandler);

  // Put the text of the link in the input
  input.val(a.text());

  // Temporarily detach the link from the DOM to get it
  // out of the way
  a.detach();

  // Give the input focus, then wait for it to blur
  input[0].focus();

  // Our "done" handler
  function doneHandler() {
    // Replace the content of the original link with
    // the updated content
    a.text(input.val());

    // Put the link back, remove our input and other link
    a.insertBefore(input);
    input.remove();
    doneLink.remove();
  }
});

Live example

这不是你能做到的唯一方法,但它相当清晰简单。有关详细信息,请参阅内联注释以获取说明,the docs(当然!)。请注意,我们使用闭包来临时存储分离的链接;有关闭包的更多信息,请阅读 Closures are not complicated