Making details show/hide on toggle of a row
Making details show/hide on toggle of a row
Hi, I can make the example provided on this sit work, however I do not want to have just picture to be the 'active' clickable element.
Instead, I want the user to be able to click any given row, which shows the details, then click that same row, which would close the details. Also, for good measure clicking the details themselves should close the row.
I'm thinking of the following, but I don't know what the 'something' property or function should be (isOpen?)
[code]
$('#tasks tbody tr').click( function () {
var that = this;
if ( this.childNodes[0].something? )
{
$('#tasks').dataTable().fnClose( this );
}
else
{
$('#tasks').dataTable().fnOpen( this, getDetailRow(this), "details_row" );
}
$('#tasks .details_row').click( function () {
$('#tasks').dataTable().fnClose(that);
} );
});
[/code]
Instead, I want the user to be able to click any given row, which shows the details, then click that same row, which would close the details. Also, for good measure clicking the details themselves should close the row.
I'm thinking of the following, but I don't know what the 'something' property or function should be (isOpen?)
[code]
$('#tasks tbody tr').click( function () {
var that = this;
if ( this.childNodes[0].something? )
{
$('#tasks').dataTable().fnClose( this );
}
else
{
$('#tasks').dataTable().fnOpen( this, getDetailRow(this), "details_row" );
}
$('#tasks .details_row').click( function () {
$('#tasks').dataTable().fnClose(that);
} );
});
[/code]
This discussion has been closed.
Replies
1. Check the $(this).next() element (might not be the right jQuery API call... not sure! But the idea is to get the next TR element in the table) and see if it has a TD with a class of 'details_row'.
2. Assign a class to 'open' rows which you can quickly check and see if it is open or not.
Allan
Chrome debugger shows nothing past the last visible column, so I can't refer to it in jquery.
[code]
$('#tasks tbody tr').click( function () {
//alert($(this).next().hasClass('details_row'));
var ssss = $(this).get(0).children(0); //gets the childTD
alert(ssss.className) // class is blank
alert(ssss.tagName); // returns TD
if ($(this).next().hasClass('details_row')) // never triggers
{
$('#tasks').dataTable().fnClose( this );
}
else
{
$('#tasks').dataTable().fnOpen( this, getDetailRow(this), "details_row" );
}
});
[/code]