jQuery 获取带有 id 的单击单元格的表头名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15494998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get table header name of clicked cell with id
提问by vulkoingim
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:
我有一张桌子，在那个桌子上我有id="edit". 现在，我想要的是在单击任何单元格时获取相应列的标题名称。到目前为止，基于先前提出的问题，我所拥有的是：
$('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:
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>
回答by Adil
The function closest()loop in ancestors up the DOMtree 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 thof td. For being specific assign idto parent table so that the script does not operate on other tables / tdon page.
函数最接近（）在DOM树上的祖先中循环并且 th 不是 td 的父，所以最接近不是正确的选择。首先，如果您对多个元素具有相同的 id，请使用 class。其次使用 index() 找到对应th的td. 用于特定分配id给父表，以便脚本不会tables / td对页面上的其他内容进行操作。
Html
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
Javascript
$('#tbl1').on('click', '.edit', function () {
var th = $('#tbl1 th').eq($(this).index());
alert(th.text()); // returns text of respective header
});
回答by Vishal
For this markup
对于这个标记
<table>
<tr class="header">
<th>Header One</th>
<th>Header Two</th>
<th>Header Three</th>
</tr>
<tr>
<td class="edit">One</td>
<td class="edit">Two</td>
<td class="edit">Three</td>
</tr>
<tr>
<td class="edit">One</td>
<td class="edit">Two</td>
<td class="edit">Three</td>
</tr>
</table>
You can use this jQuery code:
您可以使用此 jQuery 代码：
$(".mytable").on('click', 'td.edit', function(e) {
var index = $(this).index();
var table = $(this).closest('table');
console.log(table.find('.header th').eq(index).text()); // returns the header text
});
Fiddle here: http://jsfiddle.net/7qXm8/
在这里小提琴：http: //jsfiddle.net/7qXm8/
