Question

我想做一些至少对我来说很复杂的事情。

我在更大的表格中有这个：

 <table><tr>
 <td class="editC" id="comments:942" onchange="TimeLine();" onclick="empty('comments:942');" title="Click to edit..."> Second test of new comment behavior 
 </td></tr></table>

以下是发生的事情：
1）class =“editC”=我使用Editable来编辑和写入数据库 2）id =“comments：942”= id值
3）onchange =“TimeLine（）;” = timeLine（）函数从另一个DB获取信息并将其放入屏幕上的第二个HTML表中。这有效..不用担心。
4）onclick =“empty（'comments：942'）”= empty是一个清空字段但不更新DB的函数。我只想要一个干净的输入字段来输入新数据来代替现有数据。

我想要发生的是这个。

a）如果在这个现在为空的字段中输入了某些内容，一切都很好，我的save.php代码会将其保存到数据库中。这很有效。
b）但是如果在现在空的字段中没有输入任何内容，我希望将旧值放回原位而不更新数据库。在我的脑海中，这相当于首先削减当前值，然后如果没有输入任何新内容则将其粘贴回去。

在我看来，jQuery应该能够通过输入事件来做到这一点。

 function empty(thisID){
    $(thisID).on('input',function(){
       $(this).val()   // should get current value
    });
   document.getElementById(thisID).innerHTML = ''; // empty the field

   ... but now what? How do I determine if a change was made? How do I replace the original value if a change wasn't made?
 }

但现在呢？如何确定是否进行了更改？如果没有进行更改，如何替换原始值？

Answer 1

td个元素没有input个事件。但是，可以在<input>内嵌套td标记。

$("td input").on("focusin", function() {
    currentValue = $(this).prop("value");
    $(this).prop("value", "");
}).on("focusout", function() {
    if($(this).prop("value") === "") {
        $(this).prop("value", currentValue);
    }
});

这里，当使用focusin事件找到输入时，输入的值存储在全局变量中。它需要是全局的，因为我们必须在下一个函数中使用这个变量。存储变量后，通过将value属性设置为空字符串来删除输入字段。

如果用户未进行任何更改并保留输入字段（使用focusout事件检测到），则value属性将重置为曾经的状态。

当前小提琴

http://jsfiddle.net/a592awoo/1/

Answer 2

一个问题是您将'comments:942'传递给empty函数。

因此，当您执行$(thisID)时，它会尝试查找元素<comments:942>。要按ID进行选择，您需要#。

你可以这样做：

$('#'+thisID)

或者只是传入'#comments:942'。

但是，这也行不通。在id中使用:通常是一个坏主意，因为它在CSS和jQuery选择器中具有特殊含义，因此您可能希望使用-。如果这不是一个选项，您可以escape the :。

即使修复了jQuery选择器，我也不确定你是如何尝试在<td>元素上获取用户输入的。您需要一个<input>元素。

我相信你正在努力做到这样的事情：

$(document).ready(function() {
  //this will add a click function to all elements with a class of 'editC'
  $('.editC').on('click', function() {
    //clear the current value
    $(this).empty();
    //append an input element
    $(this).append($('<input type="text" placeholder="Enter new value">'));
    //append a button
    var btn = $('<button>Submit</button>');
    //add click function on submit button to replace old td value with what is in the input
    $(btn).on('click', function() {
      //get the parent <td> element
      var td = $(this).parent();
      //get the previous element's value (the value of the <input> element)
      var val = $(this).prev().val();
      //remove the input element and button from the td
      $(td).empty();
      //set the text of the <td> to what was entered in the input element
      $(td).text(val);
    });
    $(this).append(btn);
    //unbind the click event, so that it does not perform this function when you click in the input element
    $(this).unbind('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class='editC' id='comments-1'>Value 1</td>
    <td class='editC' id='comments-2'>Value 2</td>
  </tr>
</table>

使用jQuery输入事件有条件地更新innerHTML

2 个答案: