TutorialMeta
Ad

How To Make A HTML Table Cell Into A Editable Text Box

- 1 answer

Basically, I want the the user to click the table and edit the text.

This is the Js Fiddle I followed:

http://jsfiddle.net/ddd3nick/ExA3j/22/

Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.

When I double click the cell nothing happens, I am not sure why is not working.

Please help to find what's missing!

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
<script type="text/javascript">

    $(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();
        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
        $(this).find('input').dblclick(function(e){
            e.stopPropagation(); 
        });
    });
});

</script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<table class="editableTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Shahid</td>
                <td>[email protected]</td>
                <td>012-234-2432</td>
            </tr>
        </tbody>
    </table>

<a href='http://ssiddique.info'> ssiddique </a>

</body>
</html>
Ad

Answer

  1. First include the jQuery library
  2. Than put your script
  3. You might want to take a look at contenteditable Elements

which would than look pretty much like this:

$(function() {

  var $td = $("td");

  $td.on({
    "keypress" : function(e) {
      if (e.which !== 13) { // On Return key - "save" cell
        e.preventDefault();
        $(this).prop("contenteditable", false);
      }
    },
    "dblclick" : function() {
      $td.not(this).prop("contenteditable", false);
      $(this).prop("contenteditable", true);
    }
  });

});
td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<p><b>Double-click</b> on a table cell to edit</p>r

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000</td>
      <td>Roko</td>
      <td>[email protected]</td>
      <td>021-321-4321</td>
    </tr>
    <tr>
      <td>001</td>
      <td>Shahid</td>
      <td>[email protected]</td>
      <td>012-123-1234</td>
    </tr>
  </tbody>
</table>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad