How to bulk select <td> using jQuery

Question

Hi,

I am having a HTML table with many rows. I have seven columns in it. Each cell (<td>) in the table has an ID attribute with grid[x][y] with x and y representing columns and rows respectively.

Example <td>s are

<td id="grid[2][2]" class="available"...> -- This indicates 3rd column 3rd row 
<td id="grid[2][4]" class="unavailable"...> -- This indicates 3rd column 5th row 

and so on.

Now I need to write a query which gives me the count of columns with class="available" or class="unavailable". How to write it in jQuery?

So, for getting first column which has class="available" it would be something like this,

(id = grid[0]* and class == "available").size

Please help me transform the above (a stupid query) into a meaningful jQuery.

Answer 1

How about this one?

here's the code

var $column_number = 2;
var $total_for_column_2 = 0;
for(var $i=0;$i<$total_number_of_rows;$i++) {
  if ( $("td[id=grid[+ $i +"]["+ $column_number +"]").hasClass("available") ) {
    $total_for_column2++;
  }
}

this one loops through a specific column, checks if it has the available class and adds it up

Answer 2

 $("td[id|=grid].available")

That's "TDs which have an ID beginning with 'grid' and a class of 'avaiable'"

Now the problem is that the brackets are used for the "search attribute" selector, and I'm not sure how to use then in the search text portion.

Answer 3

Here,

$("td[id^='grid[0]'].available").length

should give you number of td's with class available and 0 row. And you can change row number and get others.

Answer 4

Another approach you could use if you don't want to rely on the ids of the cells would be:

$("#myTable").find("td:nth-child(1).available").length

Be aware that the nth-child selector is 1-based, not 0-based.