Редактор таблиц через jquery

Question

Возможно, мы все работали с phpMyAdmin, а именно с таблицей. Конечно, вы заметили, что, нажав на ячейку, ячейка становится входом. Я решил написать свой плагин (задачу), но столкнулся с двумя проблемами (другие пока не заметили). Как их решить?

1-я проблема: При нажатии на ячейку ячейка становится входом с исходными данными ячейки. Предположим, мне нужно изменить не полностью, а частично. Для этого мне нужно поместить курсор в нужное место, но данные ячейки стираются. Я понимаю, почему это так, но я не знаю, как решить

2-я проблема: Я не знаю, как сделать так, чтобы при щелчке по другой ячейке старый ввод становился ячейкой, то есть, если щелкнуть все ячейки, все они становятся input'om.

HTML

$(function() {
  $("td").workTables();
});


//Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию
(function($) {
  /* Чтобы добавить новый метод в объект jQuery, 
   * необходимо добавить функцию с его реализацией в объект jQuery.fn. 
   * В нашем плагине нужно организовать один метод,
   * который будет работать с ячейками таблицы
   * Назовем его так же как и сам плагин — workTables
   */
  $.fn.workTables = function() {
    // this - это то, на что кликнули (в данном случае)
    $(this).click(function() {

      if (this.nodeName == "TD") {

        var cell = $(this).text();

        $(this).empty();

        var input = '<input type="text" value="' + cell + '">';

        $(this).append(input);

        $('input').focus().select();


      }

      /*  один из примера решения при помощи prompt
          if (this.nodeName == "TD") {
              var cell = $(this).text();
          
              var value = prompt("Введите новое значение ячейки", cell);
              
              var question = confirm('Вы уверены, что хотите обновить содерживое ячейки?');
          
              if (question == true) {
                  $(this).text(value);
              }
          }
          //$(this).css('color', '#ff0000');
      */
    });

    $(this).keypress(function(e) {
      if (e.keyCode == "13") {
        cell = $('input').val();
        $('input').remove();
        $(this).text(cell);
      }
    });
  };
})(jQuery);

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.workTables.js"></script>

<table style="width:100%">
  <tr>
    <th></th>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
    <th>Четверг</th>
    <th>Пятница</th>
    <th>Суббота</th>
    <th>Воскресенье</th>
  </tr>
  <tr>
    <td>1 пара 8:00 - 9:35</td>
    <td></td>
    <td></td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Программная и системная инженерия</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2 пара 9:45 - 11:20</td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Веб-технологии</td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Программная и системная инженерия</td>
    <td></td>
    <td>Элективные курсы по физической культуре</td>
    <td></td>
  </tr>
  <tr>
    <td>3 пара 12:10 - 13:45</td>
    <td>Бизнес-аналитика и статистика</td>
    <td>Разработка приложений с использованием Oracle</td>
    <td>Элективные курсы по физической культуре</td>
    <td>Программная и системная инженерия</td>
    <td>Документирование создания информационных систем</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>4 пара 13:55 - 15:30</td>
    <td>Бизнес-аналитика и статистика</td>
    <td>АИС в производстве</td>
    <td>Эконометрика</td>
    <td>Проектирование информационных систем</td>
    <td>Бизнес-аналитика и статистика</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>5 пара 16:10 - 17:45</td>
    <td>Эконометрика</td>
    <td>Разработка приложений с использованием Oracle</td>
    <td></td>
    <td>Проектирование информационных систем</td>
    <td>Эконометрика</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>6 пара 17:55 - 19:30</td>
    <td>Эконометрика</td>
    <td>АИС в производстве</td>
    <td></td>
    <td>Проектирование информационных систем</td>
    <td>Документирование создания информационных систем</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>7 пара 20:05 - 21:40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

Несколько проблем.

Вам нужно проверить внутри обработчика щелчка, есть ли у <td> вход.В противном случае он опустошит существующий, и нет текста для добавления ко второму вводу, который он добавляет.Вот почему весь выделенный текст исчезает

Чтобы отменить другие, добавьте класс editable на вход и найдите другие ячейки в родительской таблице, которые имеют такой ввод.

Следующее устраняет эти проблемы, а также немного улучшает код

$(function() {
  $("td").workTables();
});


//Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию
(function($) {
  /* Чтобы добавить новый метод в объект jQuery, 
   * необходимо добавить функцию с его реализацией в объект jQuery.fn. 
   * В нашем плагине нужно организовать один метод,
   * который будет работать с ячейками таблицы
   * Назовем его так же как и сам плагин — workTables
   */
  $.fn.workTables = function() {
    // this - это то, на что кликнули (в данном случае)

    // "this" in plugin is the whole collection of elements in selector
    // loop over whole collection and isolate individual elements
    // "return this" makes the plugin chainable with other jQuery methods
    return this.each(function() {

      var $td = $(this);

      $td.click(function() {
        // don't do anything if cell has an editable input in it
        if ($td.find('input.editable').length) {
          return
        }
        // revert any other cells that have <input> back to text
        $td.closest('table').find('td').has('input.editable').text(function() {
          return $(this).find('input.editable').val()
        });

        var cell = $td.text();

        var $input = $('<input>', {
          class: "editable",
          value: cell
        });

        $td.html($input);

        $input.focus().select();

      });

      $td.keypress(function(e) {
        if (e.keyCode == "13") {
          var $input = $td.find('input.editable')
          if ($input.length) {
            $td.text($input.val());
          }
        }
      });
    })
  };
})(jQuery);

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.workTables.js"></script>

<table style="width:100%">
  <tr>
    <th></th>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
    <th>Четверг</th>
    <th>Пятница</th>
    <th>Суббота</th>
    <th>Воскресенье</th>
  </tr>
  <tr>
    <td>1 пара 8:00 - 9:35</td>
    <td></td>
    <td></td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Программная и системная инженерия</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2 пара 9:45 - 11:20</td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Веб-технологии</td>
    <td>Система технико-экономического анализа деятельности организации</td>
    <td>Программная и системная инженерия</td>
    <td></td>
    <td>Элективные курсы по физической культуре</td>
    <td></td>
  </tr>
  <tr>
    <td>3 пара 12:10 - 13:45</td>
    <td>Бизнес-аналитика и статистика</td>
    <td>Разработка приложений с использованием Oracle</td>
    <td>Элективные курсы по физической культуре</td>
    <td>Программная и системная инженерия</td>
    <td>Документирование создания информационных систем</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>4 пара 13:55 - 15:30</td>
    <td>Бизнес-аналитика и статистика</td>
    <td>АИС в производстве</td>
    <td>Эконометрика</td>
    <td>Проектирование информационных систем</td>
    <td>Бизнес-аналитика и статистика</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>5 пара 16:10 - 17:45</td>
    <td>Эконометрика</td>
    <td>Разработка приложений с использованием Oracle</td>
    <td></td>
    <td>Проектирование информационных систем</td>
    <td>Эконометрика</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>6 пара 17:55 - 19:30</td>
    <td>Эконометрика</td>
    <td>АИС в производстве</td>
    <td></td>
    <td>Проектирование информационных систем</td>
    <td>Документирование создания информационных систем</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>7 пара 20:05 - 21:40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>