在 pug 中编辑表格的单元格并将编辑的数据保存到数据库中

Question

我有一个使用哈巴狗或玉创建的表格，我希望编辑表格的单元格并将编辑后的数据保存到数据库中。

    div(class="",style="max-width:60%;display:flex;flex-flow:row wrap;flex-basis:auto;")
    -var columnList = ["Source", "Keyword", "Status", "Description"]

    div(class="tbl_")
      div(class="tblHeader_ fourColumn_")
        each item in columnList
          div(class="tblCell_") #{item}
      div(class="tblBody_")
        each keyword in keywords
          div(class="tblRow_ fourColumn_")
            div(class="tblCell_") #{keyword.Source}
            div(class="tblCell_") #{keyword.Keyword}
            if keyword.Status == 0
              div(class="tblCell_") None
            else if keyword.Status == 1
              div(class="tblCell_") Data Collection
            else if keyword.Status == 2
              div(class="tblCell_") Data Processing
            else if keyword.Status == 3
              div(class="tblCell_")DataCollecton/Processing
            div(class="tblCell_") #{keyword.Description}



    $(function () {
      $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal") {
          e.stopPropagation();
          var currentEle = $(this);
          var value = $(this).html();
          updateVal(currentEle, value);
        }
      });
    });

    function updateVal(currentEle, value) {
      $(document).off('click');
      $(currentEle).html('<input class="thVal" type="text" value="' + value + '"/>');
      $(".thVal").focus();
      $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val());
        }
      });

      $(document).click(function () {
        if($(event.target).attr('class')!="thVal") {
          $(currentEle).html($(".thVal").val());
          $(document).off('click');
        }
      });
    }

我试过上面的js代码但是没有用，我还在pug中提供了表格代码，请提供正确的java脚本代码，可以编辑表格的单元格并将编辑后的数据保存到数据库中。

Answer 1

我对 Pug 不太熟悉，但您可以检查 jeditable JS 进行内联编辑。它可能对你有用。

https://appelsiini.net/projects/jeditable/