Javascript jquery数据表使用表单编辑表行数据

var tb=$（'#示例'）.DataTable（）；
$（'#addRow'）。在（'单击'，函数（）上）{
var typeName=$（“#类型选项：选中”）.val（）；
var金额=$（“#金额”）.val（）；
tb.row.add（[typeName，amount]）.draw（）；
});

类型
01型
02型
数量
添加
类型
数量
直接添加HTML。我添加了一个按钮，您也可以类似地添加一个下拉列表。考虑以下事项：


var tb=$（'#示例'）.DataTable（）；
$（'#addRow'）。在（'单击'，函数（）上）{
var typeName=$（“#类型选项：选中”）.val（）；
var金额=$（“#金额”）.val（）；
var row=tb.row.add（[typeName，amount，“EditDelete”]）.draw（）；
var edit=row.node（）.getElementsByTagName（“按钮”）[0]；
edit.onclick=函数（）{
document.getElementById（'typeEdit'）。value=row.data（）[0]；
document.getElementById（'amtEdit'）。value=row.data（）[1]；
}
});

类型
01型
02型
数量
添加




编辑类型
01型
02型
编辑金额




类型
数量
老年退休金
对应用程序的体系结构进行某些更改后，我建议采用以下采用本机数据表选项和API方法的方法：


//初始化数据表
常量tb=$（“#示例”）.DataTable({
//为了更清晰地查看，请拆下非必要的控件
dom：‘t’，
//使用“列”选项设置标题标题
栏目：[
{title:'Type'}，
{
标题：“金额”，
//用户“渲染”为每个条目附加编辑/删除按钮
render:data=>`${data}删除编辑`
}
]
});
//单击用于添加新行和提交编辑的双重用途“提交”按钮的处理程序
$（“#提交”）。在（'单击'，函数（）上{
//提交按钮将新行追加到表中时（默认）
if（$（this.attr（'action'）=='addRow'）{
tb.row.add（[$（“#type”）.val（），$（“#amount”）.val（））.draw（）；
}
//“提交”按钮用于提交编辑时
if（$（this.attr（'action'）=='confirmEdit'）{
//更改受影响的行数据并重新绘制表格
tb.row（$（this.attr（'rowindex'））.data（[$（“#type”）.val（），$（“#amount”）.val（））.draw（）；
}
//清理表单，将其切换到默认状态
$（'#type'）.val（“”）；
$（'金额'）.val（“”）；
$（'#submit'）.attr（'action'，'addRow'）；
});
//“删除”按钮单击处理程序
$（“#示例”）。在（'click'，'t正文tr按钮[action=“delete”]”上，函数（事件）{
tb.row（$（event.target）.closest（'tr'））.remove（）.draw（）；
});
//“编辑”按钮单击处理程序
$（“#示例”）。在（'click'，'t正文tr按钮[action=“edit”]”上，函数（）{
//获取受影响的行条目
const row=tb.row（$（event.target）.closest（'tr'）；
//获取受影响的行（）.index（），并将其附加到“提交”按钮属性中
//如果愿意的话，可以使用全局变量
$（'#submit'）.attr（'rowindex'，row.index（））；
//将“提交”按钮角色切换为“确认”
$（'提交'）.attr（'操作'，'确认'）；
//根据所选条目设置“类型”和“金额”值
$（'#type'）.val（row.data（）[0]）；
$（'#amount'）.val（row.data（）[1]）；
});
t车身tr按钮{
显示：块；
浮动：对；
}

类型
01型
02型
数量
提交
rowdeditor.js

我也有一个类似的问题，并编写了一个小型JS工具，用于在线编辑行。回购协议可以找到。我认为下面的图片最好地描述了它的功能，但您也可以找到一个运行示例


设置它

你要做的是整合它

下载并集成该文件


设置关于哪些列应可编辑的配置，以及它们是否应作为下拉列表或输入进行编辑（将其与示例图片进行比较，您将快速了解其功能）：


初始化数据表后，调用编辑器：

$（文档）.ready（函数（）{
table=$（“#table”）.DataTable（）；
rowEditor=新的rowEditor（“#表”，表，editRowSettings）；
});

使用要编辑的行的索引调用函数editRow of rowEditor（或以上面的命名方式）。我把这个按钮放在datatable的一个seperate列中，但是您可以任意调用它。
编辑

如果您有问题，请随时提出或发出请求：）
为什么要使用另一个下拉列表和文本框。我们不能用一套吗？是的，我们可以，我只是想证明这是可以做到的。这是否回答了您最初的问题？尽管这个答案被接受，但它并不能解决最初的问题-表行不会被该代码编辑或删除。此外，还有一个原生DataTables选项
columns.render
，可用于附加这些按钮和原生DataTables API方法以编辑删除表数据。关于正确的方法，您可以参考解决方案。@U25lYWt5IEJhc3RhcmQg谢谢您的澄清，我不熟悉API。@U25lYWt5IEJhc3RhcmQg您的解决方案很棒。它具有内联编辑功能。我需要将数据加载到数据插入表单。检查上面的图片。你知道怎么做吗？
       "1":{"type":"input"},
       "2":{"type":"input"},
       "3":{"type":"select",
           "options":{
               "1":{"value":'Sales Assistant', "title":'Sales Assistant'},
               "2":{"value":'Tech Lead', "title":'Tech Lead'},
               "3":{"value":'Secretary', "title":'Secretary'},
               "4":{"value":'Developer', "title":'Developer'},
               "5":{"value":'Trainee', "title":'Trainee'}
           }
       }
}