内联编辑数据表jquery答案

【问题标题】：Inline editing datatable jquery内联编辑数据表jquery
【发布时间】：2017-12-07 02:09:41
【问题描述】：

您好，我一直在尝试学习有关内联编辑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 并从那里开始？

【问题讨论】：

你提供的链接不是数据表
数据表内置了内联编辑的实现。看这里 - editor.datatables.net/examples/inline-editing/simple
谢谢，我会试试这个。
@sintakonte 您可以将其发布为我的数据表问题的答案。
好吧谢谢-我回答了;)

标签： javascript jquery html css codeigniter

【解决方案1】：

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

它作为自己的扩展程序安装

编辑器中的内联编辑通过使用inline() API 方法激活。只需调用该方法并传入要编辑的单元格作为第一个参数。

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

【讨论】：