Question

I am currently stumped on a project I am working on. Using jQuery, I am trying to calculate the length (number of tds) in each div object in an open row. I have a link to my demo.

http://staging.mc.vanderbilt.edu/criss/ui-projects/r4u/073112/lab.html

Clicking on a “Patient Name” opens the row and each “pill” will expand to reveal data. Some “pils” (.results) have multiple data entries. My jQuery selection should count the tds in each .results, then depending on if there are 2 or 3 or more a “.ear” shows up to allow expansion. I don’t want the ear to show if there are only 2 tds in the tr.dates row.

I have this functionality working if you click on a “pill” before opening the row. Try the “SPEP” in Patient One row.

I’m relatively new to Jquery so not great at writing complex functions or selections. Any help is greatly appreciated.

Answer 1

To count number of tds in tr.dates, you can use something like following

$(this).find('tr.dates td').length

assuming $(this) will be the current “.results” div.

So, as per your requirement if above code is equal to <= 2 don’t show “.ear”.

Some more code to show working thing

//Clicked on some button in tr with the class 'pt_row'
$('.pt_row td .name, .info_row td .name').click(function() {
   //Get closest pt_row and iterate through results section in this pt_row.
   $(this).closest('.pt_row').find('.results').each(function() {
      //Count number of tds in the dates
      if ( $(this).find('tr.dates td').length <= 2 ) {
         //We have 2 or less tds. So, don't show ear
         $(this).find('.ear').hide();
      } else {
         //We have more than 2 tds. So, show ear
         $(this).find('.ear').show();
      }
   });
});