數據表Jquery通過單擊TR展開/摺疊

Question

我正在使用jquery數據表插件，並希望通過單擊TR來擴展我的表。

有他們的網站上，其膨脹並通過在列點擊圖像崩潰的例子：

http://datatables.net/release-datatables/examples/api/row_details.html

請有人可以幫我修改下面的代碼，這樣我可以展開/摺疊點擊TR行

/* Formating function for row details */ 
     function fnFormatDetails (oTable, nTr) 
     { 
      var aData = oTable.fnGetData(nTr); 
      var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'; 
      sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>'; 
      sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>'; 
      sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>'; 
      sOut += '</table>'; 

      return sOut; 
     } 

     $(document).ready(function() { 
      /* 
      * Insert a 'details' column to the table 
      */ 
      var nCloneTh = document.createElement('th'); 
      var nCloneTd = document.createElement('td'); 
      nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">'; 
      nCloneTd.className = "center"; 

      $('#example thead tr').each(function() { 
       this.insertBefore(nCloneTh, this.childNodes[0]); 
      }); 

      $('#example tbody tr').each(function() { 
       this.insertBefore( nCloneTd.cloneNode(true), this.childNodes[0]); 
      }); 

      /* 
      * Initialse DataTables, with no sorting on the 'details' column 
      */ 
      var oTable = $('#example').dataTable({ 
       "aoColumnDefs": [ 
        { "bSortable": false, "aTargets": [ 0 ] } 
       ], 
       "aaSorting": [[1, 'asc']] 
      }); 

      /* Add event listener for opening and closing details 
      * Note that the indicator for showing which row is open is not controlled by DataTables, 
      * rather it is done here 
      */ 
      $('#example 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 = "../examples_support/details_open.png"; 
        oTable.fnClose(nTr); 
       } 
       else 
       { 
        /* Open this row */ 
        this.src = "../examples_support/details_close.png"; 
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
       } 
      }); 
     }); 

在此先感謝。

Answer 1

把這段代碼放在那裏，然後編寫一個函數來執行展開/摺疊事件。

$('#example tbody tr').click(function() { 

     $('#example tbody tr').myExpandCollapseFunction(); 

} 

把這個代碼代碼之後......

$('#example thead tr').each(function() { 
     this.insertBefore(nCloneTh, this.childNodes[0]); 
    }); 

    $('#example tbody tr').each(function() { 
     this.insertBefore( nCloneTd.cloneNode(true), this.childNodes[0]); 
    });