Javascript Jquery如何在事件数据表生成的td行中使用它

Javascript Jquery如何在事件数据表生成的td行中使用它,javascript,jquery,datatables,Javascript,Jquery,Datatables,我试图添加一个函数调用“onblur”,在这里我可以在TD单元格中键入一个新值。我需要的是函数传递给其他Jquery脚本的新值。我的问题是datatable看不到这个值,因为代码似乎写得不正确。我做错了什么?到目前为止,我找不到任何对我有帮助的东西 这是可以工作的php版本,这是我试图在Datatable中实现的 名称 具体的。如何在下面的行中使用新的类型化值作为“this”,或者如何实现在jquerydatatable的HTML表中工作的代码 var选项={ 数据:“我的数据”, 呈现:函

我试图添加一个函数调用“onblur”,在这里我可以在TD单元格中键入一个新值。我需要的是函数传递给其他Jquery脚本的新值。我的问题是datatable看不到这个值,因为代码似乎写得不正确。我做错了什么?到目前为止,我找不到任何对我有帮助的东西

这是可以工作的php版本,这是我试图在Datatable中实现的


名称
具体的。如何在下面的行中使用新的类型化值作为“this”,或者如何实现在jquerydatatable的HTML表中工作的代码

var选项={
数据:“我的数据”,
呈现:函数(数据、类型、行、元){
返回“”+数据+“”;
}
}
DataTables脚本中用于添加属性的部分:

createdRow:函数(行、数据、数据索引){
$('td:eq(4'),第行).attr('contenteditable',true);
$('td:eq(4)'行).attr('data-old_值',data.bullets);
}
我想使用以下脚本发布
saveInlineEdit
函数的值

功能高亮编辑(editableObj){
$(editableObj).css(“背景”,即“);
} 
函数saveInlineEdit(可编辑对象,列,id){
//没有更改,则返回false
if($(editableObj.attr('data-old_值')==editableObj.innerHTML){
返回false;
}
//发送ajax以更新值
$(editableObj.css(“背景”,即“#FFF url(loader.gif)无重复右键”);
$.ajax({
url:“update_inlinedata.php”,
cache:false,
数据:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
成功:功能(响应){
控制台日志(响应);
//将更新值设置为旧值
$(editableObj.attr('data-old_value',editableObj.innerHTML);
$(editableObj).css(“背景”,即“);
}
});
}

您的问题有两个不同的部分-下面介绍如何捕获更改的单元格数据,并确保DataTable反映用户在DOM中所做的编辑

(我没有处理突出显示问题,但我认为您也可以扩展下面的方法来解决这个问题,因为它处理相同的数据。)

我认为在
columnDef
中使用
createdCell
选项可能比使用
createdRow
容易一些,因为您可以直接访问列的值:

columnDefs:[{
目标:4,
createdCell:函数(td、cellData、rowData、rowIdx、colIdx){
//“td”是DOM节点,而不是DataTable单元
td.setAttribute('contenteditable',true);
td.setAttribute('拼写检查',false);
td.setAttribute('data-old_值',cellData);
td.addEventListener(“焦点”,函数(e){
原始=e.target.textContent;
})
td.addEventListener(“模糊”,函数(e){
如果(原始!==e.target.textContent){
log('row ID:',rowData.ID);
log('newDOM值:',td.innerHTML);
//“cell”是DataTable单元格,而不是DOM节点:
设cell=$('#示例').DataTable().cell(rowIdx,colIdx);
console.log('before cell update:',cell.data());
cell.data(td.innerHTML);
console.log('after cell update:',cell.data());
}
})
}
} ]
确认:上述方法从中所示的方法修改而来

以下是一个独立的演示:

var my_data=[
{
“id”:“123”,
“名字”:“老虎尼克松”,
“职位”:“系统架构师”,
“工资”:“$320800”,
“子弹”:“lorem ipsum”,
“办公室”:“爱丁堡”,
“extn”:“5421”
},
{
“id”:“456”,
“姓名”:“唐娜·斯奈德”,
“职位”:“客户支持”,
“工资”:“$112000”,
“子弹”:“多洛·希特·阿梅特”,
“办公室”:“纽约”,
“extn”:“4226”
}
];
$(文档).ready(函数(){
变量表=$(“#示例”)。数据表({
数据:我的数据,
栏目:[
{标题:“ID”,数据:“ID”},
{标题:“名称”,数据:“名称”},
{标题:“办公室”,数据:“办公室”},
{标题:“位置”,数据:“位置”},
{标题:“子弹”,数据:“子弹”},
{标题:“Extn.”,数据:“Extn”},
{标题:“薪金”,数据:“薪金”}
],
columnDefs:[{
目标:4,
createdCell:函数(td、cellData、rowData、rowIdx、colIdx){
//“td”是DOM节点,而不是DataTable单元
td.setAttribute('contenteditable',true);
td.setAttribute('拼写检查',false);
td.setAttribute('data-old_值',cellData);
td.addEventListener(“焦点”,函数(e){
原始=e.target.textContent;
})
td.addEventListener(“模糊”,函数(e){
如果(原始!==e.target.textContent){
log('row ID:',rowData.ID);
log('newDOM值:',td.innerHTML);
//“cell”是DataTable单元格,而不是DOM节点:
设cell=$('#示例').DataTable().cell(rowIdx,colIdx);
console.log('before cell update:',cell.data());
cell.data(td.innerHTML);
console.log('after cell update:',cell.data());
}
})
}
} ]
} ); 
} );

演示

编辑后,您需要更新插件api中存储的行数据,并调用另一个Draw,感谢您的反应。我的问题不是这样。我的问题是线路好像出错了什么的。我需要知道如何在这行onBlur=“saveInlineEdit('THIS.innerHTML,'name',+row.data_id+')”onClick=“highlightEdit(THIS);”中定义THIS part,因此我需要帮助如何放置正确的点和逗号,甚至在询问有关客户端行为的问题时如何访问用户键入的新值以发送到更新脚本,不要包含PHP代码。使用PHP输出的呈现HTML。您不应该使用1990年代风格的脚本属性,如
onblur
。使用jQuery事件代码进行设置。这也有助于