Question

您好我一直在尝试按照本教程关于内联编辑http://www.vandelaydesign.com/inline-edit-with-ajax/。我想在我的数据表中应用它。当用户单击编辑按钮时，其行中的相应列将成为输入，但我不知道如何将其转换为该输入。在教程中，它使用jquery中的.prev来获取span的值，但我不知道如何在我的情况下这样做。这就是我的表格：

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

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

    });

在解决这个问题之后，我还需要在将来的校对方面提供帮助，我将如何保存它，也许获得跨度id并从那里开始？

Answer 1

数据表有内置编辑的实现。

它作为自己的扩展安装

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

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

内联编辑数据表jquery

1 个答案: