jQuery выбирает столбцы в таблицах и обновляет значения onClick, используя th и td, присутствующие в таблице.

Question

Я пытаюсь обновить значения затрат в отдельном элементе div из внешнего XML-файла, когда пользователь нажимает на столбец таблицы.

Моя структура таблицы выглядит следующим образом:

<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>

Поэтому, когда пользователь нажимает на столбец уровня 1, цены обновляются в отдельном разделе панели затрат на лету.

Вот jQuery, который я использую для достижения этой цели:

// 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;

};

Проблема возникает при использовании селектора *, так как он индексирует элементы внутри ths и tds, а также когда я хочу, чтобы функция ограничивалась нажатием только на th или td.

Есть идеи?

Answer 1

Изменение вашей первой строки на

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

.. должно сработать.