您好，我一直在尝试学习有关内联编辑的教程 http://www.vandelaydesign.com/inline-edit-with-ajax/ .我想将它应用到我的数据表中。当用户单击编辑按钮时，其行内的相应列将成为输入，但我不知道如何将其转换为这种方式。在本教程中，它在 jquery 中使用 .prev 来获取 span 的值，但我不知道如何在我的情况下执行此操作。这是我的 table 的样子:
单击编辑按钮时，类别名称和描述应成为输入。我该怎么做？
<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);
});
在解决这个问题后，我还需要帮助进行 future 的校对，我将如何保存它，也许获取 span id 并从那里开始？
最佳答案
数据表内置了内联编辑功能。
它作为自己的扩展安装
Inline editing in Editor is activated through the use of the inline() API method. Simply call the method and pass in the cell you want to edit as the first parameter.
Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple
关于javascript - 内联编辑数据表 jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47686466/