редактируемая таблица JavaScript не работает должным образом

Я использую следующий код, чтобы сделать таблицу html редактируемой (этот код получен из ссылки онлайн-учебника: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425).

$("td").dblclick(function () {
        //Obtain and record the value in the cell being edited. This value will be used later
        var OriginalContent = $(this).text();

        //Addition of class cellEditing the cell in which the user has double-clicked
        $(this).addClass("cellEditing");
        //Inserting an input in the cell containing the value that was originally on this.
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        //directing the focus (cursor) to the input that was just created, so that the user does not need to click on it again.
        $(this).children().first().focus();

        //the opening and closing function that handles the keypress event of the input. 
        //A reserved word this refers to the cell that was clicked. 
        //We use the functions first and children to get the first child element of the cell, ie the input.
        $(this).children().first().keypress(function (e) {
            //check if the pressed key is the Enter key
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
    });

Кажется, он работает нормально. Затем я использую следующую функцию для чтения содержимого таблицы и создания json-представления:

function showRefTable(){

  var headers = [];
  var objects = [];
  var headerRow = $('#dataTable thead tr');
  var rows = $('#dataTable tbody tr');

  headerRow.find('th').each(function(){
    headers.push($(this).text());
  });


  for (var i=0; i<rows.length; i++){
    var row = rows.eq(i);
    var object = new Object();
    for (var j=0; j<row.find('td').length; j++){
      object[headers[j]] = row.find('td').eq(j).text();
    }
    objects.push(object);

  }

  var json = JSON.stringify(objects);
  alert(json);

}

Эта функция используется как обратный вызов события onclick. Проблема в том, что функция, используемая для чтения содержимого таблицы, показывает исходное содержимое, даже если я делаю редактирование (показать источник страницы показывает исходное содержимое).

благодаря