Редактировать встроенные данные

Question

Я использую таблицу данных, которая позволяет редактировать inline. В этой таблице есть одна строка с тегом HTML (например, тег span). Во время редактирования текстовое поле показывает HTML. Я прилагаю изображения.

Обычный DataTable - перед редактированием

После нажатия на кнопку Изменить

Answer 1

Вам просто нужно добавить текст к var, затем удалить текст ячейки и добавить input

        $(function(){
          $(".input").click(function(){
              if(!$(this).hasClass("typing")){
                var text = $(this).text();
                $(this).text("");
                $(this).append('<input class="input" type="text" value="'+text+'">');
                $(this).focus();
                $(this).addClass("typing");
              }else {
                $(this).removeClass("typing");
              }
          });
        
        })

 .input {
    cursor: pointer;
    }

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

        hello
        </td>
        <td class="input">
        test
        </td>
        </tr>
        </table>