jQuery：對表內部行進行內聯編輯

Question

我是jquery和datatable的新手。 我為“聯系人”開發了可編輯的數據表，其中每一行代表一個聯系人。 每個“聯系人”都有一些與之關聯的“動作”。

當用戶單擊特定的“聯系人”時，關聯的“動作”顯示為該特定聯系人下的其他行。

現在，我要使“聯系人”行和“動作”行都可編輯。 我已經使用了“ jEditable”插件，並且可以將“ contact”行設置為可編輯而不是“ action”行。 任何想法或幫助將不勝感激。

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" );
                    }

                });

Answer 1

您可以改用jqGrid，我想這對您來說是完美的http://www.trirand.com/blog/