javascript - Get value of editable td in table with Jquery - Stack Overflow

admin管理员组

文章数量:1355272

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

Share Improve this question Follow edited Apr 6, 2017 at 14:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 23, 2016 at 10:54 Zied R.Zied R. 4,95433 gold badges3737 silver badges6969 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

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>

本文标签： javascriptGet value of editable td in table with JqueryStack Overflow