Selecting the Next Table Row

If you find yourself with a table of alternating rows, first a visible summary row followed by a hidden detail row, then selecting the next table row is a piece of cake. You may need to do it for any number of reasons, too. For starters, you may want to only turn on the "expand" icon in the summary row if there is actually data in the detail row. We will assume that the detail row contains div.something if there is actually data there. [js]$("table tr:visible").each(function() { ($(this).next().is(":has(div.something)") && $(this).find("img.expand").show()); });[/js] That will select the visible rows in the table and iterate over them. It will check each one to see if it has the div we are looking for and if it does, it will show the expand image. We are taking advantage of the fact that there are all function calls and using short circuit evaluation of the conditional to not run the argument after the && if it fails. One of my favorite Stupid Javascript Tricks. You may also want to actually show and hide the table when the expand icon is clicked. Also pretty easy to do. [js]$("table tr img.expand").click(function() { $(this).closest("tr").next().toggle(); });[/js] That will toggle the table row following the one containing the clicked expand icon. Pretty straightforward stuff, thanks to jQuery.