jQuery在表中選擇列和更新值onClick同時在表中列出th和td

Question

我試圖在用戶單擊表格列時更新外部XML文件的單獨div中的成本值。

我的表結構如下：

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

}; 

問題是使用*選擇，因爲這指數的部份內的元素髮生和TDS以及時，我只希望限於函數點擊th或td。

任何想法？

Answer 1

改變你的第一線，

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

..應該做的伎倆。