I have a dynamic table :

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td contenteditable='true'>Value1</td>
        </tr>
        <tr>
            <td>2</td>
            <td contenteditable='true'>Value2</td>
        </tr>
    </tbody>
</table>

I want to get the value of the editable cell when the user finish writing (blur)

$('table td').focus(function () {
    console.log("focus ");
    console.log("echo each input "); // show every carac inputed

});
$('table td').blur(function () {
    console.log("blur ");
    console.log("echo the new value"); // show the new value

});

So my question how I can get the new value in blur event and how I get exactly which td is modified.

I have a dynamic table :

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td contenteditable='true'>Value1</td>
        </tr>
        <tr>
            <td>2</td>
            <td contenteditable='true'>Value2</td>
        </tr>
    </tbody>
</table>

I want to get the value of the editable cell when the user finish writing (blur)

$('table td').focus(function () {
    console.log("focus ");
    console.log("echo each input "); // show every carac inputed

});
$('table td').blur(function () {
    console.log("blur ");
    console.log("echo the new value"); // show the new value

});

So my question how I can get the new value in blur event and how I get exactly which td is modified.

• javascript
• jquery
• html
• html-table

7 Answers 7

Use input instead of focus if you want to show every character inputed.

You could use $(this).text() or $(this).html() to get the value in the td.

Hope this helps.

snippet

$('table td').on('input', function () {
  console.log($(this).text());
});

$('table td').on('blur', function () {
  console.log("blur new value : "+$(this).text());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable='true'>Value1</td>
    </tr>
    <tr>
      <td>2</td>
      <td contenteditable='true'>Value2</td>
    </tr>

  </tbody>
</table>

So my question how i can get the new value in blur event

Using the html method. (Or text, if you don't want the markup.) It's not the value, it's the new content. (td elements don't have a value.)

and how i get exactly which td is modified

It's this in the blur event callback.

So:

$('table td').blur(function () {
    var newContent = $(this).html();
    // ...
});

Side note: Since td elements are invalid outside of tables, $('table td') is just the same as $('td').

Use text() function like following.

$('table td').blur(function () {
    console.log($(this).text());
});

$('table td').focusout(function(){
    alert($(this).text());
});

The focusout event occurs when an element (or any elements inside it) loses focus. The focusout() method attaches a function to run when a focusout event occurs on the element, or any elements inside it.

You can access the content of td (it has no value!) with jQuery text or html function, e.g.: $(this).text() or $(this).html():

$(function() {
  $('table td').focus(function() {
    console.log("focus ");
    console.log("echo each input "); // show every carac inputed

  });
  $('table td').blur(function() {
    console.log("blur ");
    console.log("echo the new value: " + $(this).text()); // show the new value

  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>

  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable='true'>Value1</td>
    </tr>
    <tr>
      <td>2</td>
      <td contenteditable='true'>Value2</td>
    </tr>

  </tbody>
</table>

use $(this).text();

$('table td').blur(function(){
    alert($(this).text());
});

You should use keyup instead of focus to get each letter, and keypress instead of keyup if you want to get the right letter case.

Check this fiddle.

$(function(){
$('table td').keypress(function(e){
    var singleChar=String.fromCharCode(e.keyCode)
    console.log("focus ");
    console.log(singleChar); // show every carac inputed
});

$('table td').blur(function(){
    console.log("blur ");
    console.log($(this).text()); // show the new value
});
});

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable='true'>Value1</td>
    </tr>
    <tr>
      <td>2</td>
      <td contenteditable='true'>Value2</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>