jQuery selector?

jQuery selector?

I have a table defined like below from a server generated page.

I'm trying to get a handle to the <thead> portion so that I can add another heading.

I'm not quite sure how to do this with jQuery.

I did it by traversing the DOM and somehow was able to do what I wanted, but I want to know how to do it for future reference.

Can someone help?

Thank you in advance for your help.

<div class="zendiv" id="ExpenseSubTable" zen="86" style="height: 394px;">
<table class="tpTable" border="1" cellspacing="0" cellpadding="0">
<thead id="tpHead_86" class="tpHead">
<tr>
<th width="100px" id="th_ExpenseDate_86" onclick="zenPage.getComponent(86).headerClick('ExpenseDate');">Date&nbsp;</th>
<th width="150px" id="th_Description_86" onclick="zenPage.getComponent(86).headerClick('Description');">Description&nbsp;</th>
<th width="200px" id="th_CategoryID_86" onclick="zenPage.getComponent(86).headerClick('CategoryID');">Category&nbsp;</th>
<th width="100px" id="th_AmountRequested_86" onclick="zenPage.getComponent(86).headerClick('AmountRequested');">Requested&nbsp;</th>
<th width="100px" id="th_AmountApproved_86" onclick="zenPage.getComponent(86).headerClick('AmountApproved');">Approved&nbsp;</th>
<th width="150px" id="th_ColButtons_86" onclick="zenPage.getComponent(86).headerClick('ColButtons');"> &nbsp;</th>
</tr>
</thead>
<tbody class="tpBody" id="tpBody_86" style="height: 370px;">
</tbody>
</table>
</div>