我是 jquery 和数据表的新手。我为“联系人”开发了可编辑的数据表，其中每一行代表一个联系人。每个“联系人”都有一些与之相关的“动作”。
当用户点击特定的“联系人”时，关联的“动作”将显示为该特定联系人下的附加行。
现在我想让“联系人”行和“操作”行都可编辑。我使用了“jEditable”插件，并且可以将“联系人”行设置为可编辑而不是“操作”。任何想法或帮助将不胜感激。
userInfo = "<table id='mycontacttable'><thead><tr><th></th><th>FirstName</th><th>FamilyName</th></tr></thead><tbody> ";
/*constructing the Contact table, at this stage without the actions.*/
for(i =0 ; i < response.result.length ; i++){
var contactid=response.result[i].contactID;
userInfo += "<tr><td>"+
"<img src=\"../javascript/datatables/media/images/details_open.png\" rel="+contactid+" alt=\"expand/collapse\"></td>"+
"<td>"+ response.result[i].givenName + "</td><td>" + response.result[i].familyName+"</td></tr> ";
}
userInfo += "</tbody></table> ";
$('#info').html("The following are your contacts. " + userInfo);
/*setting the sortable and unsortable columns*/
oTable= $('#mycontacttable').dataTable({
"iDisplayLength": 25,
"bSort": true,
"aoColumns": [
{ "bSortable": false },//Disable sorting on this column
null,
null
]
}).makeEditable();
/*clicking a particular row in the table mycontacttable, and assigning the click event*/
$('#mycontacttable tbody td img').live("click",function () {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "../javascript/datatables/media/images/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "../javascript/datatables/media/images/details_close.png";
var contact_id = $(this).attr("rel");/*contact id of a particular row that is clicked is stored in the variable contact_id*/
/*creating a sub table*/
action_sub_table = "<table id='submycontacttable'>"
for(i =0 ; i < response.result.length ; i++){
var contactid=response.result[i].contactID;
if(contact_id==contactid){
/*Iterating through each action of the contact, and constructing a sub table row for it*/
for(count=0;count<response.result[i].actionSet.length;count++){
action_sub_table += "<tr><td>"+response.result[i].actionSet[count].actionID+" </td><td>"+
response.result[i].actionSet[count].actionDueDate+"</td><td>" +
response.result[i].actionSet[count].actionNote+"</td></tr>";
}
}
}
action_sub_table +="</tablr>"; /*Construction of the subtable complete*/
oTable.fnOpen(nTr, action_sub_table, "info_row" );
}
});