[英]How to find the corresponding th to a given td?
Basically the same question as How can I get the corresponding table header (th) from a table cell (td)?基本上与如何从表格单元格 (td) 获取相应的表格标题 (th)相同的问题? but not jQuery specific.
但不是特定于 jQuery 的。
From a given <td>
is there an easy way to find the corresponding <th>
?从给定的
<td>
是否有一种简单的方法可以找到相应的<th>
?
<table width="100%" id="stock">
<tr>
<th>Name</th>
<th>Type</th>
<th>Quantity</th>
<th>Options</th>
</tr>
<tr>
<td>foo</td>
<td id="target">bar</td>
<td>-1</td>
<td>...</td>
</tr>
I'd like something doing this:我想这样做:
document.getElementById('target').correspondingTH // would return HTMLObject <th>Type</th>
An ideal answer might contain both a jQuery way to do it and a vanilla one but I'm personally looking for a vanilla one.一个理想的答案可能同时包含一种 jQuery 方法和一种香草方法,但我个人正在寻找一种香草方法。
Pure JavaScript's answer.纯 JavaScript 的答案。
var index = Array.prototype.indexOf.call(your_td.parentNode.children, your_td)
var corresponding_th = document.querySelector('#your_table_id th:nth-child(' + (index+1) + ')')
As posted here in the more jQuery specifc question: https://stackoverflow.com/a/37312707/1524913正如在更多 jQuery 特定问题中发布的那样: https : //stackoverflow.com/a/37312707/1524913
HTML table model gives easier solution. HTML 表格模型提供了更简单的解决方案。 jquery in this case is more sophisticated.
在这种情况下,jquery 更复杂。 I tested following table:
我测试了下表:
<table style="width:100%" id="stock">
<tbody>
<tr>
<td>foo</td>
<td id="target">bar</td>
<td>-1</td>
<td>...</td>
</tr>
<tr>
<td>foo</td>
<td id="target">bar</td>
<td>-1</td>
<td>...</td>
</tr>
</tbody>
<tr>
<td>foo</td>
<td id="target">bar</td>
<td colspan="2">-1</td>
<!--<td>...</td>-->
</tr>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Quantity</th>
<th>Options</th>
</tr>
</thead>
</table>
Script without jquery is simple and straightforward.没有 jquery 的脚本简单明了。
window.onload = function () {
var tbl = document.getElementById('stock');
var tds = document.getElementsByTagName('td');
for (var i = 0, td; td = tds[i]; ++i) {
td.onclick = function () {
var tr = this.parentNode;
console.log(tbl.rows[0].cells[this.cellIndex].innerHTML);
}
}
}
jquery also is useful. jquery 也很有用。
$(document).ready(function () {
$('#stock td').click(function () {
console.log($(this).parents('table').find('tr:first-child').children('th:nth-child(' + (this.cellIndex + 1) + ')').html());
});
});
<thead>
can be placed at the top, at the bottom, and between rows. <thead>
可以放置在顶部、底部和行之间。 thead inside tbody is obvious error but browser fixes it. tbody 内的 thead 是明显的错误,但浏览器修复了它。 Scripts work in any case.
脚本在任何情况下都有效。
I think you need to step through the TH colSpans to exactly match the TD我认为你需要通过 TH colSpans 来完全匹配 TD
Try尝试
function getHeadCell(td) {
var index = Array.prototype.indexOf.call(td.parentNode.children, td);
var table = td;
while (table && table.tagName != 'TABLE') table = table.parentNode;
var cx = 0;
for (var c = 0; cx <= index; c++) cx += table.rows[0].cells[c].colSpan;
return table.rows[0].cells[c - 1];
}
See https://jsfiddle.net/Abeeee/upt75s2x/34/ for a working example有关工作示例,请参阅https://jsfiddle.net/Abeeee/upt75s2x/34/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.