Question

我有一个表，我想在点击时更新表格单元格的值。我想显示一个包含当前值的输入字段。当前值显示但是当我点击输入字段进行编辑时，突然输入字段变空。

$('td#11').click(function(event){
 var valuee = $('td#11').text();
 $('td#11').html("<form method='post'><input style='color:black;' value=" +valuee+ "></form>");

});

Answer 1

另一种其他解决方案：

$('td#11').click(function(event){
if($('td#11').find('form, input').length == 0) { 
    var valuee = $('td#11').text();
    $('td#11').html("<form method='post'><input id='txt11' style='color:black;' value=" +valuee+ "></form>");
}
});

您可以使用上面的代码段添加另一个代码段，以便在失去焦点时删除文本框，如下所示：

$(document).on('blur', 'input#txt11', function() {
    $('td#11').html($('input#txt11').val());
});

工作演示 jsFiddle

Answer 2

问题是您的点击事件会一次又一次地触发，等等。

要避免这种情况，请使用event.target.tagName并检查它是否与“INPUT”不匹配

$('td#11').click(function(event) {
  if (event.target.tagName != "INPUT") {

    var valuee = $('td#11').text();
    $('td#11').html("<form method='post'><input style='color:black;' value=" + valuee + "></form>");

  }
});

下面的工作演示

$('td#11').click(function(event) {
  if (event.target.tagName != "INPUT") {

    var valuee = $('td#11').text();
    $('td#11').html("<form method='post'><input style='color:black;' value=" + valuee + "></form>");

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="11">text</td>
  </tr>
</table>

如何使用jquery在输入字段中显示变量？

2 个答案: