Datatables TRをクリックしてJqueryを展開/折りたたむ

Question

jquery datatablesプラグインを使用しています。私は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]); 
    });