jQuery在表中选择列并在表中同时显示th和td的情况下更新onClick中的值

当用户单击表列时，我尝试在外部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>

福利表
选择您的保险级别
价格
&磅；5.
&磅；10
&磅；20
治疗的全部费用，高达100%

&磅；50
每年

&磅；100
每年

&磅；150
每年

适用于所有级别

因此，当用户单击Level 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;

};

//在单击列时检索XML信息
$（“#福利tr*）。单击（函数（）{
var colIndex=$（this）.parent（）.children（）.index（$（this））；
如果（colIndex！=0）{
$.get（'/cash plan quote/poc.xml'，函数（数据）{
$（数据）。查找（'level'）。每个（函数（）{
变量$level=$（此）；
var$levelName=$level.attr（'name'）；
如果（colIndex==$levelName）{
var coverLevel='Level'+$Level.attr（'name'）+'benefits'；
var$month=$level.find（'month'）.text（）；
var monthCost='£；'+$month+''；
var$week=$level.find（'week'）.text（）；
var weekCost='£；'+$week+''；
$（'div.costPanel>h2>span'）。替换为（$（coverLevel））；
美元（'部门成本面板>部门成本>h5'）。替换为（$（月成本））；
$（'div.costPanel>div.costs>h6'）。替换为（$（weekCost））；
};
}); 
});
返回false；
};

当我只希望函数限制为单击th或td时，问题出现在使用*选择器索引ths和tds中的元素

---

有什么想法吗？

将第一行更改为

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

---

…应该能做到这一点。

将第一行更改为

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

---

…应该能做到。

请编辑你的问题（代码）…很难阅读…请编辑你的问题（代码）…很难阅读…谢谢。我不知道你能做到这一点。我被深深地投入其中，但那是一种享受。谢谢。我不知道你能做到。我被深深地投入其中，但那是一种享受。