尝试使用contenteditable td更新表并使用php将数据存储到sql数据库中

Question

我正在使用php中的while循环从数据库中回显信息，然后希望能够直接编辑td，然后按一个按钮以将更改保存到数据库。我在网上看了一下，发现一些使用JQuery和Ajax来执行此操作的代码，但我似乎无法使其正常工作。我对编码非常陌生，因此对此将大有帮助！

我尝试了几种不同的方法来执行此操作，这似乎是最直接的方法，我尝试使用更新查询，但对不同的语言并不熟悉，无法知道是否已将它们全部链接正确。

这是html-我已经拥有所有数据库连接以及以前的所有内容-

nifty_returns = {2012:[27,0],2013:[6,-14],2014:[31,0],2015:[-4,-4],
                 2016:[3,-12], 2017:[28,0], 2018:[3,-5]}

bnf_returns = {2012:[56,0],2013:[-9,-28],2014:[64,-13],2015:[-10,-16],
                 2016:[7,-18], 2017:[40,0], 2018:[6,-8]}

strat_returns = 
{'2012': [105, -2], '2013': [99, -3], '2014': [56, -5], '2015': [457, -12], '2016': [113, 0], '2017': [84, 0], '2018': [164, 0]}

这是JS文件-

    <div class="users_table">
    <table>
    <thead>
    <tr>
      <th>House ID</th>
    <th>House Name</th>
    <th>Motto</th>
    </tr>
    </thead>


    <tbody>



    <?php

    $STH = $DBH->prepare("SELECT * FROM houses");
    $STH->execute(array());

     while ($row = $STH->fetch()) {
       $house_id = $row->house_id;
      $house_name = $row->house_name;
      $house_motto = $row->house_motto;
      $house_colour = $row->house_colour;

    ?>
    <tr>
    <form method="post" action="">
          <td><?php echo $house_id; ?></td>
      <section id="editable" contenteditable="true">
        <td contenteditable><?php echo $house_name; ?></td>
        <td contenteditable><?php echo $house_motto; ?></td>
      </section>
        <td><input type="button" id="save" value="Save Changes"></td>
        <td> <input type="button" id="clear" value="Clear Change" /></td>
          <input type="hidden" name="house_id" value="<?php echo $house_id; ?>">
    </form>
      </tr>
          <?php } ?>
    </tbody>
    </table>




    </div>

这是get.php文件-

          $(document).ready(function(){

          //  alert("Hello! I am an alert box!!");

          $('.update_form').click(function() {
          $('.slide_down').slideToggle('slow');
          });

          alert("Hello! I am an alert box!!");

          var editable = document.getElementById('editable');

          addEvent(editable, 'blur', function () {
            // lame that we're hooking the blur event
            localStorage.setItem('contenteditable', this.innerHTML);
            document.designMode = 'off';
          });

          addEvent(editable, 'focus', function () {
            document.designMode = 'on';
          });

          addEvent(document.getElementById('clear'), 'click', function () {
            localStorage.clear();
            window.location = window.location; // refresh
          });

          if (localStorage.getItem('contenteditable')) {
            editable.innerHTML = localStorage.getItem('contenteditable');
          }

           $(document).ready(function(argument) {
           $('#save').click(function(){
           // Get edit field value
           $edit = $('#editable');
           $.ajax({
           url: 'get.php',
           type: 'post',
           data: {data: $edit},
           datatype: 'html',
           success: function(rsp){
           alert(rsp);
           }
           });
           });
           });




          });

我知道在警报显示时已链接了jquery文件，但不确定为什么它没有将更新的数据插入db中。