javascript - 通过 jquery 的表编辑器

Question

也许我们都使用 phpMyAdmin，即使用表。您肯定注意到，通过单击某个单元格，该单元格将成为输入。我决定编写我的插件(任务)，但是我遇到了两个问题(其他人还没有注意到)。如何解决？

第一个问题: 通过单击某个单元格，该单元格将成为原始单元格数据的输入。假设我需要改变的不是全部，而是部分。为此，我需要将光标放在正确的位置，但单元格数据被删除。我明白这是为什么，但我不知道如何决定

第二个问题: 我不知道如何做到这样，当点击另一个单元格时，旧的输入变成一个单元格，也就是说，如果你点击所有单元格，它们都变成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>