用文本框替换表单元格，读取键入的值，然后使用jquery用新值替换表单元格

Question

I am new to Jquery and working on a small project with PHP, and Jquery. Below is on of the table cell. I would like to replace this cell with a text box and read the vale entered by user and bring back the original cell(replaced cell) with this new value. I am not sure how can I do this with Jquery. Any help is highly appreciated.

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

Thanks, Bhaskar

Answer 1

I assume in your example you want to replace the a temporarily (you wouldn't want to replace the td , the table would go funny).

Here's a quick version:

$("#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

That's not the only way you can do it, but it's fairly clear and simple. See the inline comments for description, and the docs (of course!) for details. Note that we use a closure for temporary storage of the detached link; for more about closures, read Closures are not complicated .