Jquery 如何在onclick函数中查找表头和行中的第一个元素?

Jquery 如何在onclick函数中查找表头和行中的第一个元素?,jquery,html,Jquery,Html,我需要使用jquery在onclick函数中查找表头和行中的第一个元素 $(document).ready(function(){ $(".items").delegate("tr", "dblclick", function(data){ alert(data.target.innerHTML); alert($(this).find('td:eq(0)').html()); }); }); 下面的代码给出了内部html和所选行中的第一个元素。我需要得到与我单击的单元格对应

我需要使用jquery在onclick函数中查找表头和行中的第一个元素

$(document).ready(function(){
$(".items").delegate("tr", "dblclick", function(data){
    alert(data.target.innerHTML);
    alert($(this).find('td:eq(0)').html());

});
});
下面的代码给出了内部html和所选行中的第一个元素。我需要得到与我单击的单元格对应的表头

我已经尝试将下面的代码放入BLCLICK函数中,但我认为传递的索引是错误的,我如何才能获得正确的索引

var headerValue= $(this).closest("table").find('th').eq($(this).index());
    alert(headerValue.text());
html表格:

<table class="items">
<thead>
<tr>
<th id="sku-grid_c1">Name</th><th id="sku-grid_c2">Active</th><th id="sku-grid_c3">Date Created</th><th id="sku-grid_c4">Date Updated</th><th id="sku-grid_c5">Code</th><th id="sku-grid_c6">Price</th><th id="sku-grid_c7">Shipping</th><th id="sku-grid_c8">Max Qty</th><th class="button-column" id="sku-grid_c9">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="odd">
<td>fbdh</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>t67r6r7t6t</td><td>23</td><td>12</td><td>12</td></tr>
<tr class="even">
<td>bfhewfbuh</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>678ty78tg</td><td>56</td><td>7</td><td>6</td></tr>
<tr class="odd">
<td>cdbj</td><td>no</td><td>&nbsp;</td><td>&nbsp;</td><td> hudhqu</td><td>12</td><td>12</td><td>1</td></tr>
<tr class="even">
<td>guyguyf</td><td>yes</td><td>&nbsp;</td><td>&nbsp;</td><td>678gy8t</td><td>56</td><td>56</td><td>6</td></tr>
</tbody>
</table>

NameActiveDate CreatedDate UpdatedCodePriceShippingMax数量
fbdhyes t67r6r7t6t231212
bfhewfbuhyes 678ty78tg5676
cdbjno hudhqu12121
Guyfyes 678gy8t56566

所以您希望看到表头和第一个单元格

也许这对你有用:

HTML


这就是你想要的吗

HTML:

<table class="items" id="mytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Last Name</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>Joe</td>
      <td>Doe</td>
      <td>Boston</td>
      <td>MA</td>
    </tr>

    <tr class="even">
      <td>John</td>
      <td>Smith</td>
      <td>New York</td>
      <td>NY</td>
    </tr>    
  </tbody>
</table>
var tds = $('#mytable').find('td');
var ths = $('#mytable').find('th');
var td;


$('#mytable').on('dblclick', 'td', function() {
   td = $(this);

   tds.removeClass('highlight');
   ths.removeClass('highlight');

   td.addClass('highlight');
   ths.eq(td.index()).addClass('highlight');
});

我们能看看实际的表吗?如果我是正确的,我相信第一个索引是0,而不是1,正如你在你的发现中所做的那样statement@Greg-你说得对。我会换的now@Hanlet-我已经用表代码更新了问题。看起来它对我很有效。您只是缺少一个
})它没有返回html值,而是返回某种类型的对象。您可以提醒所选行中第一列值的值和相应的表标题吗?说真的,您想让我为您添加一个提醒吗?哇,太棒了!是的,我已经尝试了你的代码和它的工作,谢谢你的帮助。
<table class="items" id="mytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Last Name</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>Joe</td>
      <td>Doe</td>
      <td>Boston</td>
      <td>MA</td>
    </tr>

    <tr class="even">
      <td>John</td>
      <td>Smith</td>
      <td>New York</td>
      <td>NY</td>
    </tr>    
  </tbody>
</table>
var tds = $('#mytable').find('td');
var ths = $('#mytable').find('th');
var td;


$('#mytable').on('dblclick', 'td', function() {
   td = $(this);

   tds.removeClass('highlight');
   ths.removeClass('highlight');

   td.addClass('highlight');
   ths.eq(td.index()).addClass('highlight');
});