jQuery Click Cell to Change into Text Box

Question

I have been looking on Google and StackOverflow but haven't been able to find what I'm after as of yet. If someone could point me in the right direction that would be great.

What I have is a table with 5 rows

<tr>
    <th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></th>
    <td>123456</td>
    <td>Address 1</td>
    <td>10th Feb 2011 (10:43am)</td>
    <td><ul class="keywords">
        <li class="pink-keyword">Awaiting Reply</li>
        <li class="purple-keyword">Direct</li>
        </ul>
    </td>
    <td>(Notes Text)</td>
    <td>1</td>
    <td class="table-actions">
        <a href="#" title="View" class="with-tip"><img src="images/magnifier.png" width="16" height="16"></a>
        <a href="#" title="Edit" class="with-tip"><img src="images/pencil.png" width="16" height="16"></a>
        <a href="#" title="Validate" class="with-tip"><img src="images/navigation.png" width="16" height="16"></a>
        <a href="#" title="Close" class="with-tip"><img src="images/cross-circle.png" width="16" height="16"></a>
    </td>
</tr>

What I am looking to do is be able to edit the <td>(Notes Text)</td> value in the table cell by clicking on it so it changes to an input box (displaying currently what is in the cell) so it can be edited and saved again by clicking off it.

I have a (very) basic knowledge in jQuery but fine with the updating side of things using PHP / MySQL.

Any help would be great.

Thanks

Answer 1

One possible way:

$('td:contains("(Notes Text)")').click(

  function() {
    var text = $(this).text();
    $(this).text('');
    $('<textarea />').appendTo($(this)).val(text).select().blur(

      function() {
        var newText = $(this).val();
        $(this).parent().text(newText).find('textarea').remove();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>

      </td>
    </tr>
  </tbody>
</table>

While the above works, I'd heartily recommend applying a class to the td element that you'd like to be able to edit (assuming you want to be able to edit more than one cell).

Failing that: you could just use the contentEditable attribute in the html:

<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td contentEditable>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

---

Edited in response to question from OP (in comments):

One tiny (I hope) other question was, is there any way to move it from being a textarea to and input?

Yep; that's pretty easily accomplished:

$('td:contains("(Notes Text)")').click(
  function() {
    var text = $(this).text();
    $(this).text('');
    $('<input type="text" />').appendTo($(this)).val(text).select().blur(
      function() {
        var newText = $(this).val();
        $(this).parent().text(newText), find('input:text').remove();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

Note the change from $('<textarea />') to $('<input type="text" />') although the type attribute may not be strictly required (since input elements default to type="text" anyway). Also the find('input:text').

References:

• appendTo().
• blur().
• click().
• find().
• parent().
• remove().
• select().
• text().
• val().

Answer 2

Take a look at some of the edit-in-place plugins. For example:

• jQuery Editable
• Jeditable