jQuery获取带有id的单击单元格的表头名称 [英] jQuery get table header name of clicked cell with id

问题描述

我有一张表，在该表中我的值为 id =edit。现在，我想要的是在我点击任何单元格时获取相应列的标题名称。到目前为止，根据之前提出的问题，我所拥有的是：

  $（'body'）。on（'click' ，'td＃edit'，function（）{
 var th = $（'this'）。nearest（'th'）。eq（$（'th'）。val（））; 
 alert（th）; //返回[object Object] 
 ......................... 
} 
  

你能帮我解决这个问题吗？

HTML：

 < table id =myTableclass =myTable> 
 < tbody> 
< tr> 
< th>选择< / th> 
< th> JobNo< / th> 
< th>客户< / th> ; 
< th> JobDate< / th> 
< th> Warranty< / th> 
< th> RepairStatus< / th> 
< th> POP< / th> 
< th> DOA< / th> 
< th>模型< / th> 
< th> SN< / th> 
< / tr> ; 
< tr> 
< td class =check> 
< input type =checkboxvalue =12345> 
< / td> 
< td class =edit> 
< b> 12345< / b> 
< / td> 
< td class =edit> gdsgasdfasfasdfa< / td> 
< td class =edit> 2011-01-21< / td> 
< td class =edit> TRUE< / td> 
< td class =edit> RP< / td> 
< td class =edit> FALSE< / td> 
< td class =edit> 0< / td> 
< td class =edit> 5152342< / td> 
< td class =edit> 66665464< / td> 
< / tr> 
< / tbody> 
  

解决方案

nearest（）函数循环在 DOM 树和th不是td的父级，所以最接近的是不正确的选项。首先，如果您对多个元素具有相同的id，请使用类。其次使用index（）查找 td 的相应 th 。为了特定地将 id 分配给父表，以便该脚本不在页面上的其他 tables / td 上运行。 / p>



现场演示

Html

 < table id =tbl1border = 1 > 
< tr> 
< th>标题1< / th> 
< th>标题2< / th> 
< / tr> 
< tr> 
< td class =edit>第1行，第1行< / td> 
< td class =edit>第1行，第2行< / td> 
< / tr> 
< tr> 
< td class =edit>第2行，第1单元< / td> 
< td class =edit>第2行，第2单元< / td> 
< / tr> 
< / table> 
  

Javascript

  $（'＃tbl1'）。on（'click'，'。edit'，function（）{
 var th = $（'＃tbl1 th'）。 eq（$（this）.index（））; 
 alert（th.text（））; //返回相应标题的文本
}）; 
  

I have a table, and in that table I have values with id="edit". Now, what I want is to get the header name of the corresponding column when I click on any of the cells. What I have so far, based on a previous question asked is:

$('body').on('click', 'td#edit', function() {  
    var th = $('this').closest('th').eq($('th').val());
    alert(th);        // returns [object Object]
    .........................
}

Can you help me out with this?

HTML:

<table id="myTable" class="myTable">
<tbody>
    <tr>
        <th>Select</th>
        <th>JobNo</th>
        <th>Customer</th>
        <th>JobDate</th>
        <th>Warranty</th>
        <th>RepairStatus</th>
        <th>POP</th>
        <th>DOA</th>
        <th>Model</th>
        <th>SN</th>
    </tr>
    <tr>
        <td class="check">
            <input type="checkbox" value="12345">
        </td>
        <td class="edit">
            <b>12345</b>
        </td>
        <td class="edit">gdsgasdfasfasdfa</td>
        <td class="edit">2011-01-21</td>
        <td class="edit">TRUE</td>
        <td class="edit">RP</td>
        <td class="edit">FALSE</td>
        <td class="edit">0</td>
        <td class="edit">5152342</td>
        <td class="edit">66665464</td>
    </tr>
</tbody>

解决方案

The function closest() loop in ancestors up the DOM tree and th is not parent of td so closest is not right option. First of all use class if you are having same id for more than one elements. Secondly use index() to find the corresponding th of td. For being specific assign id to parent table so that the script does not operate on other tables / td on page.

Live Demo

Html

<table id="tbl1" border="1">
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
    </tr>
    <tr>
        <td class="edit">row 1, cell 1</td>
        <td class="edit">row 1, cell 2</td>
    </tr>
    <tr>
        <td class="edit">row 2, cell 1</td>
        <td class="edit">row 2, cell 2</td>
    </tr>
</table>

Javascript

$('#tbl1').on('click', '.edit', function () {
    var th = $('#tbl1 th').eq($(this).index());
    alert(th.text()); // returns text of respective header
});

这篇关于jQuery获取带有id的单击单元格的表头名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！