asked on

How to count the number of table cells with a custom attribute and class?

Experts,

I'd like to be able to count the number of table cells with a custom attribute and class name and place the resulting count within another table cell with matching custom attribute.

I'm likely overthinking this but, I thought the best approach would be with the use of the ".each()".

Help?

$("#records_table .total").each(function(){
	//GET CUSTOM ATTRIBUTE VALUE OF FIRST .total CELL FOUND IN LAST ROW OF TABLE
	var week_ending = $(this).attr('week_ending');
       //SET COUNT VALUE TO ZERO
        var successful_count = 0;
	//LOOP THROUGH ALL TABLE CELLS WITH CLASS .sub
	$("records_table .sub").each(function(){
                //COMPARE EACH TABLE CELL'S 'week_ending' VALUE MATCHES THE 'week_ending' VARIABLE AND CLASS EQUALS 'successful' INCREASE COUNTER BY 1
		if($(this).attr('week_ending')==week_ending && $(this).hasClass('successful')){
			//INCREASE VALUE BY ONE
                        successful_count++;
		}
	});
	//PUT successful_count INTO CURRENT ".total" CELL
	$(this).html('').html(successful_count);
});

Open in new window

Here is a snippet of my table which I am attempting to loop through to find my counts.

Given this example, I'd expect the value of the first cell in the 'Totals' row to equal "2". I'd expect the value of the second cell within the 'Totals' row to equal "0", third cell equal to "1", etc.

<table id="records_table" border="1">
<tr id="G455078" style="background-color: inherit;">
    <td class="centered sub ui-table-priority-1 successful" week_ending="4-2">4-2</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-9">4-9</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-16">4-16</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-23">4-23</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-30">4-23</td>
</tr>
<tr id="Z968754" style="background-color: inherit;">
    <td class="centered sub ui-table-priority-1 successful" week_ending="4-2">4-2</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-9">4-9</td>
    <td class="centered sub ui-table-priority-1 successful" week_ending="4-16">4-16</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-23">4-23</td>
    <td class="centered sub ui-table-priority-1" week_ending="4-30">4-30</td>
</tr>
<tr>
	<td colspan="9"><b>Totals</b></td>
</tr>
<tr style="background-color: inherit;">
  <td class="centered total ui-table-priority-1" week_ending="4-2"></td>
  <td class="centered total ui-table-priority-1" week_ending="4-9"></td>
  <td class="centered total ui-table-priority-1" week_ending="4-16"></td>
  <td class="centered total ui-table-priority-1" week_ending="4-23"></td>
  <td class="centered total ui-table-priority-1" week_ending="4-30"></td>
</tr>
</table>

Open in new window

ASKER CERTIFIED SOLUTION

Mukesh Yadav

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

evibesmusic

ASKER

@Mukesh Yadav:

The code below inserts the default count value "0" into the total cells. It does not give me the total. That is why I am confused?

PS - Sorry - I forgot to mention that this code executes after the page loads.

$(document).ready(function(){
	$("#records_table .total").each(function(){
		//GET CUSTOM ATTRIBUTE VALUE OF FIRST .total CELL FOUND IN LAST ROW OF TABLE
		var week_ending = $(this).attr('week_ending');
		//SET COUNT VALUE TO ZERO
		var successful_count = 0;
		//LOOP THROUGH ALL TABLE CELLS WITH CLASS .sub
		$("#records_table .sub").each(function(){
			//COMPARE EACH TABLE CELL'S 'week_ending' VALUE MATCHES THE 'week_ending' VARIABLE AND CLASS EQUALS 'successful' INCREASE COUNTER BY 1
			if($(this).attr('week_ending')==week_ending && $(this).hasClass('successful')){
				//INCREASE VALUE BY ONE
				successful_count++;
			}
		});
		//PUT successful_count INTO CURRENT ".total" CELL
		$(this).html('').html(successful_count);
	});
});

Open in new window

SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

evibesmusic

ASKER

@All:

I must be missing something in my code because this fiddle works? Standby.

https://jsfiddle.net/bdbarrera/L7tccy40/

Mukesh Yadav

Can you please share the exact code you are using?

HainKurt

as Mukesh Yadav said, you are missing # in your code, Line 7

evibesmusic

ASKER

@all:

Turns out I was missing the "#" as pointed out by Mukesh.

Also helps when you don't nest a function inside of another function accidentally. I un-nested my function and it now works.

Thanks Experts.