jQuery selecting columns in tables and updating values onClick with both th and td present in table

Question

I am trying to update cost values in a seperate div from an external XML file when a user clicks on a table column.

My table structure is as follows:

<table id="benefit" class="portletTable benefitsTable" summary="This table displays the level of of benefit you would receive.">
 <caption>Table of benefits</caption>
 <thead>
  <tr>
   <th width="33%" scope="row" class="firstHead">
    Select your level of cover
   </th>
   <th scope="col">
    <a href="#">Level 1</a>
   </th>
   <th scope="col">
    <a href="#">Level 2</a>
   </th>
   <th scope="col">
    <a href="#">Level 3</a>
   </th>   
  </tr>
 </thead>
 <tbody>
  <tr class="price">
   <th scope="row">
    Price
   </th>
   <td>
    &pound;5
   </td>
   <td>
    &pound;10
   </td>
   <td>
    &pound;20
   </td>
  </tr>
  <tr class="benefit">
   <th scope="row">
    <div>
     <h4><a href="/cash-plan-quote/jsp/popUp.jsp" class="pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">Dental</a></h4>
     <p>Full cost of treatment, up to 100%</p>
     <a href="/cash-plan-quote/jsp/popUp.jsp" class="info pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">More information on this benefit</a> 
    </div>
   </th>
   <td>       
    <h4>&pound;50</h4>
    <p>per year</p>       
   </td>      
   <td>       
    <h4>&pound;100</h4>
    <p>per year</p>       
   </td>      
   <td>       
    <h4>&pound;150</h4>
    <p>per year</p>       
   </td>      
  </tr>
  <tr class="benefit">
   <th scope="row">
    <div>
     <h4><a href="/cash-plan-quote/jsp/popUp.jsp" class="pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">Helplines</a></h4>
     <p>Available with all levels</p>
     <a href="/cash-plan-quote/jsp/popUp.jsp" class="info pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">More information on this benefit</a>       
    </div>
   </th>
   <td>       
    <img src="/cash-plan-quote/common/images/icons/tick.png" width="19" height="16" alt="This benefit is included" />       
   </td>      
   <td>       
    <img src="/cash-plan-quote/common/images/icons/cross.png" width="19" height="16" alt="This benefit is not included" />
   </td>      
   <td>
    <img src="/cash-plan-quote/common/images/icons/tick.png" width="19" height="16" alt="This benefit is included" />
   </td>      
  </tr>
 </tbody>
</table>

So when a user clicks on the Level 1 column the prices are updated in a seperate cost panel division on the fly.

Here is the jQuery i am using to achieve this:

// Retrieve XML info on column click

$('#benefit tr *').click(function(){

var colIndex = $(this).parent().children().index ($(this));

if (colIndex != 0) {

$.get('/cash-plan-quote/poc.xml', function(data){

$(data).find('level').each(function() {

var $level = $(this);

var $levelName = $level.attr('name');

if (colIndex == $levelName) {

 var coverLevel = '<span>Level ' + $level.attr('name') + ' benefits</span>';

 var $month = $level.find('month').text();

 var monthCost = '<h5>&pound;' + $month + '</h5>';

 var $week = $level.find('week').text();

 var weekCost = '<h6>&pound;' + $week + '</h6>';

 $('div.costPanel > h2 > span').replaceWith($(coverLevel));
 $('div.costPanel > div.costs > h5').replaceWith($(monthCost));
 $('div.costPanel > div.costs > h6').replaceWith($(weekCost));    

 };

}); 


});

return false;

};

The problem is occurring using the * selector as this indexes the elements inside the ths and tds as well when i only want the function restricted to clicking on either the th or td.

Any ideas?

Answer 1

Changing your first line to

$('#benefit th, #benefit td').click(function(){

.. should do the trick.