Les objects de données Jquery développent / réduisent en cliquant sur TR

J’utilise le plugin jquery datatables et j’aimerais que ma table se développe en cliquant sur TR.

Il existe un exemple sur leur site Web, qui se développe et se réduit en cliquant sur une image dans une colonne:

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

S’il vous plaît quelqu’un peut m’aider à modifier le code ci-dessous, afin que je puisse développer / réduire la ligne en cliquant sur TR

• Impossible de supprimer l’atsortingbut de style en chrome
• Cliquez sur un autre élément et affichez les options de sélection
• Garder le menu ouvert après avoir cliqué sur le sous-élément jQuery
• Tronquer dynamicment le texte pour s’adapter à la liste
• Filtrer les div avec des atsortingbuts de données avec plusieurs cases à cocher

/* Formating function for row details */ function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = ''; sOut += ''; sOut += ''; sOut += ''; sOut += '
Rendering engine:
'+aData[1]+' '+aData[4]+'
Link to source:
Could provide a link here
Extra info:
And any further details here (images etc)
'; return sOut; } $(document).ready(function() { /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement( 'th' ); var nCloneTd = document.createElement( 'td' ); nCloneTd.innerHTML = ''; 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 = "http://soffr.miximages.com/jquery/datatables-jquery-expand-collapse-by-clicking-tr"; oTable.fnClose( nTr ); } else { /* Open this row */ this.src = "../examples_support/details_close.png"; oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); } } ); } ); 

Merci d’avance.

• Non concordance de la conception de la zone de saisie semi-automatique
• Jquery & CSS – Chevauchement de divs
• Renommer l’onglet Bootstrap avec jQuery
• Bootstrap Dual Listbox: Comment limiter l’option sélectionnée
• Comment faire en sorte que la fenêtre de dialog jQuery rest au centre du navigateur (situation spécifique)

 $('#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] ); } );