编辑内联数据表

Question

我正在使用允许编辑内联的数据表。在该表中，有一行包含HTML（如span标记）标记。在编辑时，文本框显示HTML。我正在附上图片。

普通数据表 - 编辑前

点击“修改”按钮后

Answer 1

您只需将文字添加到var，然后删除单元格文字，然后附加input

＆＃13;

＆＃13;

        $(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");
              }
          });
        
        })

＆＃13;

 .input {
    cursor: pointer;
    }

＆＃13;

        <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>

＆＃13;

＆＃13;

＆＃13;