使用 Jquery 获取表中可编辑 td 的值答案

【问题标题】：Get value of editable td in table with Jquery使用 Jquery 获取表中可编辑 td 的值
【发布时间】：2017-04-06 22:45:48
【问题描述】：

我有一个动态表：

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

我想在用户写完(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

});

所以我的问题是如何在 blur 事件中获得新值，以及如何准确地获得 td 的修改。

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

如果您想显示输入的每个字符，请使用 input 而不是 focus。

您可以使用$(this).text() 或$(this).html() 来获取td 中的值。

希望这会有所帮助。

sn-p

$('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.com/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>

【讨论】：

但这并没有显示任何输入的字符。

【解决方案2】：

所以我的问题是如何在模糊事件中获得新值

使用html 方法。（或者text，如果您不想要标记。）这不是值，而是新内容。（td 元素没有值。）

以及我如何确切地知道修改了哪个 td

它是blur 事件回调中的this。

所以：

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

旁注：由于td 元素在表格之外无效，因此$('table td') 与$('td') 相同。

【讨论】：

【解决方案3】：

使用text() 函数，如下所示。

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

【讨论】：

【解决方案4】：

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

当一个元素（或其中的任何元素）失去焦点时，会发生 focusout 事件。 focusout() 方法附加一个函数，以便在元素或其中的任何元素上发生 focusout 事件时运行。

【讨论】：

【解决方案5】：

您可以使用jQuery text 或html 函数访问td 的内容（它没有值！），例如 em>：$(this).text() 或 $(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.com/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>

【讨论】：

【解决方案6】：

使用$(this).text();

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

【讨论】：

【解决方案7】：

您应该使用 keyup 而不是 focus 来获取每个字母，如果您使用 keypress 而不是 keyup想要得到正确的字母大小写。

检查这个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.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：