内联编辑数据表jQuery

Question

嗨，我一直在尝试遵循有关内联编辑的本教程http://www.vandelaydesign.com/inline-edit-with-ajax/ 。 我想将其应用到我的数据表中。 当用户单击“编辑”按钮时，其行中的相应列将成为输入，但是我不知道如何以这种方式打开它。 在本教程中，它在jquery中使用.prev来获取span的值，但是在我的情况下，我不知道该怎么做。 这是我的桌子的样子：

单击“编辑”按钮时，类别名称和说明应成为输入。 我怎么做？

<tbody>
    <?php foreach ($categories as $category) { ?>
        <tr>
            <td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?>  </span> </td>
            <td>
                <?= $category->category_desc ?>
            </td>
            <td>
                <?= $category->created_on ?>
            </td>
            <td>
                <?= $category->updated_on ?>
            </td>
            <td>
                <?= $category->status ?>
            </td>
            <td>
                <button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
                    <!-- data-id="<?= $category->category_id ?>" -->
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                </button>
            </td>
        </tr>
        <?php } ?>
</tbody>

Javascript：

 $(document).on('click', '.edit_cat', function() {
      console.log('edit category');
      // console.log( $(this).data('id') );
      var dataset = $(this).prev(".datainfo");
      console.log(dataset);
      var theid   = dataset.attr("id");
      console.log(theid);
      var newid   = theid+"-form";
      var currval = dataset.text();

      dataset.empty();

       $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);

    });

解决此问题后，在将来的打样中也需要帮助。如何保存它，也许获取span ID并从那里开始？

Answer 1

数据表内置了内联编辑的实现。

它作为自己的扩展安装

通过使用inline（） API方法可以激活编辑器中的内联编辑。 只需调用该方法，然后将要编辑的单元格作为第一个参数传入即可。

在这里仔细看看-https: //editor.datatables.net/examples/inline-editing/simple