Html 如何创建可编辑的JQuery数据表

我正在从模型列表创建一个可编辑的JQuery数据表。我想编辑表中列出的每条记录的某些列[费率、数量、品牌、描述]。我的代码如下

ProductModel
Id int
Name string
Rate decimal
Qty int
Price decimal
Description string

Html和Javascript

$（“文档”）.ready（函数（）{
$（'#tbllist'）.DataTable（）；
});

@型号列表
名称
比率
数量
全部的
品牌
描述
@如果（型号！=null）
{
对于（var i=0；i

我根据@StéphaneLaurent的评论做了一个例子，希望它能对你有用

将文件复制到项目中，您可以将其放在

wwwroot/js

在你的页面中引用它

然后按照下面的步骤

@型号列表
名称
比率
数量
全部的
品牌
描述
@如果（型号！=null）
{
对于（var i=0；i

结果:

---

你可以使用这个插件。也许这个例子会对你有所帮助：我正在寻找有代码的人帮助我如何在我现有的代码中应用。谢谢

@model List<ProductModel>

<table id="tbllist" class="cell-border" style="width:100%">
 <thead class="thead-light">
     <tr>
         <td>Name</td>
         <td>Rate</td>
         <td>Qty</td>
         <td>Total</td>
         <td>IsBranded</td>
         <td>Description</td>
     </tr>

 </thead>
 <tbody>
 @if (Model != null)
 {
     for (var i = 0; i < Model.Count; i++)
     {
         <tr>
             <td>@Model[i].Name</td>
             <td>@Model[i].Rate</td>
             <td>@Model[i].Qty</td>
             <td>@Model[i].Total</td>
             <td><input type="checkbox" @(Model[i].IsBranded ? "checked" : "") /></td>
             <td>@Model[i].Description</td>
         </tr>
     }
 }

 </tbody>
</table>

@section scripts{
 <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
 <script src="~/js/dataTables.cellEdit.js"></script>
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
 <script type="text/javascript">
     var table = $('#tbllist').DataTable();

     function myCallbackFunction(updatedCell, updatedRow, oldValue) {
         console.log("The new value for the cell is: " + updatedCell.data());
         console.log("The values for each cell in that row are: " + updatedRow.data());
     }

     table.MakeCellsEditable({
         "onUpdate": myCallbackFunction
     });
 </script>
}