We help IT Professionals succeed at work.

How can I add the values in a table column with CSS3 and jQuery?

mrcoulson
mrcoulson asked
on
Here's a link to my test page: http://www.co.frederick.va.us/dev/jquery_math.html.  It's simpler than where this code will ultimately go.

I want to add the values in the second column.  I found this little tutorial, but I ran into some problems: http://naspinski.net/post/Use-jQuery-to-add-all-the-values-in-a-table-column_.aspx.

It doesn't work.  Firefox debug console tells me "Unknown pseudo-class or pseudo-element 'gt'." What's up?

I'll go ahead and attach my code, but it may change on the page as I tinker with this.

Jeremy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<table id="testTable">
	<tr>
		<th>Column A</th>
		<th>Column B</th>
	</tr>
	<tr>
		<td>1</td>
		<td>5</td>
	</tr>
	<tr>
		<td>1</td>
		<td>5</td>
	</tr>
</table>
<div id="result"></div>
<script type="text/javascript">
	// $("td:nth-child(2)").append("<span> - 2nd!</span>");
	// This stuff came from: http://naspinski.net/post/Use-jQuery-to-add-all-the-values-in-a-table-column_.aspx .
    var total = 0;
	var rows = $("#summaryTable tr:gt(0)");
	rows.children("td:nth-child(2)").each(function() {
    	total += parseFloat($(this).html());
	});
	$("#result").html(total);
</script>
</body>
</html>

Open in new window

Comment
Watch Question

View Solution Only

Commented:
It is very simple; you are just using a wrong selector here:
var rows = $("#summaryTable tr:gt(0)");

it should be:
var rows = $("#testTable tr:gt(0)");

mrcoulson

Author

Commented:
Hang on.  I'll be so embarrassed.

Jeremy
mrcoulson

Author

Commented:
Sweet!  Thanks for pointing out my silly mistake.  Time for a soda!

Jeremy