jquery - 编辑内联数据表

Question

我正在使用允许内联编辑的数据表。在该表中有一行带有 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>